प्रगति

स्टैक्ड बार, एनिमेटेड बैकग्राउंड और टेक्स्ट लेबल के लिए समर्थन की विशेषता वाले बूटस्ट्रैप कस्टम प्रोग्रेस बार का उपयोग करने के लिए दस्तावेज़ीकरण और उदाहरण।

इस पृष्ठ पर

यह काम किस प्रकार करता है

प्रगति घटक दो HTML तत्वों, चौड़ाई निर्धारित करने के लिए कुछ CSS और कुछ विशेषताओं के साथ बनाए गए हैं। हम HTML5 <progress>तत्व का उपयोग नहीं करते हैं , यह सुनिश्चित करते हुए कि आप प्रगति सलाखों को ढेर कर सकते हैं, उन्हें एनिमेट कर सकते हैं और उन पर टेक्स्ट लेबल लगा सकते हैं।

हम .progressप्रगति पट्टी के अधिकतम मूल्य को इंगित करने के लिए एक आवरण के रूप में उपयोग करते हैं।
.progress-barहम अब तक की प्रगति को इंगित करने के लिए आंतरिक का उपयोग करते हैं।
.progress-barउनकी चौड़ाई निर्धारित करने के लिए एक इनलाइन शैली, उपयोगिता वर्ग या कस्टम CSS की आवश्यकता होती है।
इसे पहुँच योग्य बनाने के लिए कुछ और विशेषताओं की .progress-barभी आवश्यकता होती है, जिसमें एक पहुँच योग्य नाम ( , , या समान का उपयोग करके) शामिल है।roleariaaria-labelaria-labelledby

उन सभी को एक साथ रखें, और आपके पास निम्नलिखित उदाहरण हैं।

एचटीएमएल

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

बूटस्ट्रैप चौड़ाई निर्धारित करने के लिए मुट्ठी भर उपयोगिताएँ प्रदान करता है । आपकी आवश्यकताओं के आधार पर, ये प्रगति को शीघ्रता से कॉन्फ़िगर करने में सहायता कर सकते हैं।

एचटीएमएल

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-label="Basic example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

लेबल

के भीतर टेक्स्ट रखकर अपनी प्रगति पट्टियों में लेबल जोड़ें .progress-bar।

25%

एचटीएमएल

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Example with label" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

कद

हम केवल heightपर एक मान सेट करते हैं .progress, इसलिए यदि आप उस मान को बदलते हैं तो आंतरिक .progress-barस्वचालित रूप से तदनुसार आकार बदल देगा।

एचटीएमएल

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" aria-label="Example 1px high" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" aria-label="Example 20px high" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

पृष्ठभूमि

अलग-अलग प्रगति पट्टियों का स्वरूप बदलने के लिए पृष्ठभूमि उपयोगिता वर्गों का उपयोग करें।

एचटीएमएल

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" aria-label="Success example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" aria-label="Info example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" aria-label="Warning example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" aria-label="Danger example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

सहायक तकनीकों को अर्थ देना

अर्थ जोड़ने के लिए रंग का उपयोग केवल एक दृश्य संकेत प्रदान करता है, जो सहायक तकनीकों के उपयोगकर्ताओं को नहीं बताया जाएगा - जैसे स्क्रीन रीडर। सुनिश्चित करें कि रंग द्वारा दर्शाई गई जानकारी या तो सामग्री से स्पष्ट है (उदाहरण के लिए दृश्यमान पाठ), या वैकल्पिक माध्यमों से शामिल है, जैसे कि .visually-hiddenकक्षा के साथ छिपा हुआ अतिरिक्त पाठ।

एकाधिक बार

यदि आपको आवश्यकता हो तो एक प्रगति घटक में एकाधिक प्रगति पट्टियाँ शामिल करें।

एचटीएमएल

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

धारीदार

प्रगति पट्टी के पृष्ठभूमि रंग पर CSS ग्रेडिएंट के माध्यम से एक पट्टी लगाने के .progress-bar-stripedलिए किसी में भी जोड़ें ।.progress-bar

एचटीएमएल

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" aria-label="Default striped example" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" aria-label="Success striped example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" aria-label="Info striped example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" aria-label="Warning striped example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" aria-label="Danger striped example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

एनिमेटेड धारियां

धारीदार ढाल को भी एनिमेटेड किया जा सकता है। CSS3 एनिमेशन के माध्यम से धारियों को दाएं से बाएं चेतन .progress-bar-animatedकरने के लिए जोड़ें ।.progress-bar

एचटीएमएल

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

सीएसएस

चर

v5.2.0 . में जोड़ा गया

बूटस्ट्रैप के विकसित हो रहे सीएसएस चर दृष्टिकोण के हिस्से के रूप में, प्रगति बार अब .progressवास्तविक समय के अनुकूलन के लिए स्थानीय सीएसएस चर का उपयोग करते हैं। CSS वेरिएबल्स के मान Sass के माध्यम से सेट किए जाते हैं, इसलिए Sass अनुकूलन अभी भी समर्थित है।

  --#{$prefix}progress-height: #{$progress-height};
  @include rfs($progress-font-size, --#{$prefix}progress-font-size);
  --#{$prefix}progress-bg: #{$progress-bg};
  --#{$prefix}progress-border-radius: #{$progress-border-radius};
  --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
  --#{$prefix}progress-bar-color: #{$progress-bar-color};
  --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
  --#{$prefix}progress-bar-transition: #{$progress-bar-transition};

सास चर

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       $gray-200;
$progress-border-radius:            $border-radius;
$progress-box-shadow:               $box-shadow-inset;
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

मुख्य-फ़्रेम

के लिए CSS एनिमेशन बनाने के लिए उपयोग किया जाता है .progress-bar-animated। में शामिल है scss/_progress-bar.scss।

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}