મુખ્ય સામગ્રી પર જાઓ ડૉક્સ નેવિગેશન પર જાઓ
in English

સ્પિનર્સ

બૂટસ્ટ્રેપ સ્પિનર્સ સાથે ઘટક અથવા પૃષ્ઠની લોડિંગ સ્થિતિ સૂચવો, સંપૂર્ણ રીતે HTML, CSS અને કોઈ JavaScript સાથે બિલ્ટ.

વિશે

બુટસ્ટ્રેપ "સ્પિનર્સ" નો ઉપયોગ તમારા પ્રોજેક્ટ્સમાં લોડિંગ સ્થિતિ બતાવવા માટે થઈ શકે છે. તેઓ ફક્ત HTML અને CSS સાથે જ બનાવવામાં આવ્યા છે, એટલે કે તેમને બનાવવા માટે તમારે કોઈપણ JavaScriptની જરૂર નથી. જો કે, તમારે તેમની દૃશ્યતાને ટૉગલ કરવા માટે કેટલીક કસ્ટમ JavaScriptની જરૂર પડશે. તેમના દેખાવ, ગોઠવણી અને કદને અમારા અદ્ભુત ઉપયોગિતા વર્ગો સાથે સરળતાથી કસ્ટમાઇઝ કરી શકાય છે.

સુલભતા હેતુઓ માટે, અહીં દરેક લોડરમાં નેસ્ટેડનો સમાવેશ થાય role="status"છે <span class="visually-hidden">Loading...</span>.

આ ઘટકની એનિમેશન અસર prefers-reduced-motionમીડિયા ક્વેરી પર આધારિત છે. અમારા ઍક્સેસિબિલિટી દસ્તાવેજીકરણનો ઘટાડો ગતિ વિભાગ જુઓ .

બોર્ડર સ્પિનર

હળવા વજનના લોડિંગ સૂચક માટે બોર્ડર સ્પિનર્સનો ઉપયોગ કરો.

લોડ કરી રહ્યું છે...
<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

રંગો

બોર્ડર સ્પિનર currentColor​​તેના માટે ઉપયોગ કરે છે, એટ���ે કે તમે ટેક્સ્ટ કલર યુટિલિટીઝborder-color સાથે રંગને કસ્ટમાઇઝ કરી શકો છો . તમે સ્ટાન્ડર્ડ સ્પિનર ​​પર અમારી કોઈપણ ટેક્સ્ટ કલર યુટિલિટીનો ઉપયોગ કરી શકો છો.

લોડ કરી રહ્યું છે...
લોડ કરી રહ્યું છે...
લોડ કરી રહ્યું છે...
લોડ કરી રહ્યું છે...
લોડ કરી રહ્યું છે...
લોડ કરી રહ્યું છે...
લોડ કરી રહ્યું છે...
લોડ કરી રહ્યું છે...
<div class="spinner-border text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
border-colorઉપયોગિતાઓનો ઉપયોગ કેમ ન કરવો ? દરેક બોર્ડર સ્પિનર transparent​​ઓછામાં ઓછી એક બાજુ માટે બોર્ડરનો ઉલ્લેખ કરે છે, તેથી .border-{color}ઉપયોગિતાઓ તેને ઓવરરાઇડ કરશે.

ગ્રોઇંગ સ્પિનર

જો તમને બોર્ડર સ્પિનર ​​પસંદ ન હોય, તો ગ્રો સ્પિનર ​​પર સ્વિચ કરો. જ્યારે તે તકનીકી રીતે સ્પિન કરતું નથી, તે વારંવાર વધે છે!

લોડ કરી રહ્યું છે...
<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

ફરી એકવાર, આ સ્પિનર ​​સાથે બનેલ છે currentColor, જેથી તમે ટેક્સ્ટ કલર યુટિલિટીઝ સાથે તેના દેખાવને સરળતાથી બદલી શકો . અહીં તે સપોર્ટેડ વેરિઅન્ટ્સ સાથે વાદળી રંગમાં છે.

લોડ કરી રહ્યું છે...
લોડ કરી રહ્યું છે...
લોડ કરી રહ્યું છે...
લોડ કરી રહ્યું છે...
લોડ કરી રહ્યું છે...
લોડ કરી રહ્યું છે...
લોડ કરી રહ્યું છે...
લોડ કરી રહ્યું છે...
<div class="spinner-grow text-primary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

ગોઠવણી

remબુટસ્ટ્રેપમાં સ્પિનર્સ s, currentColor, અને સાથે બનેલ છે display: inline-flex. આનો અર્થ એ છે કે તેઓ સરળતાથી માપ બદલી શકાય છે, ફરીથી રંગ કરી શકાય છે અને ઝડપથી ગોઠવી શકાય છે.

માર્જિન

સરળ અંતર માટે માર્જિન ઉપયોગિતાઓનો ઉપયોગ કરો ..m-5

લોડ કરી રહ્યું છે...
<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

પ્લેસમેન્ટ

ફ્લેક્સબોક્સ યુટિલિટીઝ , ફ્લોટ યુટિલિટીઝ , અથવા ટેક્સ્ટ એલાઈનમેન્ટ યુટિલિટીનો ઉપયોગ કરો જેથી સ્પિનર્સની તમને કોઈ પણ પરિસ્થિતિમાં જરૂર હોય ત્યાં બરાબર મૂકો.

ફ્લેક્સ

લોડ કરી રહ્યું છે...
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>
લોડ કરી રહ્યું છે...
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

તરે છે

લોડ કરી રહ્યું છે...
<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

ટેક્સ્ટ સંરેખિત કરો

લોડ કરી રહ્યું છે...
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

કદ

એક નાનું સ્પિનર ​​ઉમેરો .spinner-border-smઅને .spinner-grow-smબનાવો જેનો ઉપયોગ અન્ય ઘટકોમાં ઝડપથી થઈ શકે.

લોડ કરી રહ્યું છે...
લોડ કરી રહ્યું છે...
<div class="spinner-border spinner-border-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

અથવા, જરૂરિયાત મુજબ પરિમાણો બદલવા માટે કસ્ટમ CSS અથવા ઇનલાઇન શૈલીઓનો ઉપયોગ કરો.

લોડ કરી રહ્યું છે...
લોડ કરી રહ્યું છે...
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

બટનો

કોઈ ક્રિયા હાલમાં પ્રક્રિયા થઈ રહી છે અથવા થઈ રહી છે તે દર્શાવવા માટે બટનોની અંદર સ્પિનર્સનો ઉપયોગ કરો. તમે સ્પિનર ​​એલિમેન્ટમાંથી ટેક્સ્ટને સ્વેપ પણ કરી શકો છો અને જરૂર મુજબ બટન ટેક્સ્ટનો ઉપયોગ કરી શકો છો.

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

સસ

ચલો

$spinner-width:           2rem;
$spinner-height:          $spinner-width;
$spinner-vertical-align:  -.125em;
$spinner-border-width:    .25em;
$spinner-animation-speed: .75s;

$spinner-width-sm:        1rem;
$spinner-height-sm:       $spinner-width-sm;
$spinner-border-width-sm: .2em;

કીફ્રેમ્સ

અમારા સ્પિનરો માટે CSS એનિમેશન બનાવવા માટે વપરાય છે. માં સમાવેશ થાય છે scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}