સ્પિનર્સ

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

આ પૃષ્ઠ પર

વિશે

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

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

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

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

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

html

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

રંગો

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

html

<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}ઉપયોગિતાઓ તેને ઓવરરાઇડ કરશે.

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

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

html

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

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

html

<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

html

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

પ્લેસમેન્ટ

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

ફ્લેક્સ

html

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

લોડ કરી રહ્યું છે...

html

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

તરે છે

html

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

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

html

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

કદ

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

html

<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 અથવા ઇનલાઇન શૈલીઓનો ઉપયોગ કરો.

html

<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>

બટનો

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

html

<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>

html

<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>

CSS

ચલો

v5.2.0 માં ઉમેરાયેલ

બુટસ્ટ્રેપના વિકસતા CSS ચલોના અભિગમના ભાગરૂપે, સ્પિનરો હવે સ્થાનિક CSS ચલોનો ઉપયોગ કરે છે .spinner-borderઅને .spinner-growઉન્નત રીઅલ-ટાઇમ કસ્ટમાઇઝેશન માટે. CSS ચલો માટેના મૂલ્યો Sass દ્વારા સેટ કરવામાં આવ્યા છે, તેથી Sass કસ્ટમાઇઝેશન હજુ પણ સપોર્ટેડ છે.

બોર્ડર સ્પિનર ચલ:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-border-width: #{$spinner-border-width};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-border;

વધતા સ્પિનર ચલ:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-grow;

બંને સ્પિનરો માટે, નાના સ્પિનર મોડિફાયર વર્ગોનો ઉપયોગ આ CSS ચલોના મૂલ્યોને જરૂરિયાત મુજબ અપડેટ કરવા માટે થાય છે. ઉદાહરણ તરીકે, .spinner-border-smવર્ગ નીચે મુજબ કરે છે:

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

Sass ચલો

$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;
  }
}