స్పిన్నర్లు

బూట్‌స్ట్రాప్ స్పిన్నర్‌లతో ఒక భాగం లేదా పేజీ యొక్క లోడ్ స్థితిని సూచించండి, ఇది పూర్తిగా 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>

అమరిక

బూట్‌స్ట్రాప్‌లోని స్పిన్నర్లు rems, 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};

సాస్ వేరియబుల్స్

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