स्पिनरहरू

बुटस्ट्र्याप स्पिनरहरू, HTML, CSS, र कुनै जाभास्क्रिप्टको साथ पूर्ण रूपमा निर्मित, कम्पोनेन्ट वा पृष्ठको लोडिङ अवस्था संकेत गर्नुहोस्।

यस पृष्ठमा

बारे

बुटस्ट्र्याप "स्पिनरहरू" लाई तपाइँको परियोजनाहरूमा लोडिङ अवस्था देखाउन प्रयोग गर्न सकिन्छ। तिनीहरू केवल 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};

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