प्रगति

बूटस्ट्रैप कस्टम प्रगति बार कें उपयोग करय कें लेल दस्तावेजीकरण आ उदाहरण जे ढेर बार, एनिमेटेड पृष्ठभूमि, आ पाठ लेबल कें लेल समर्थन कें सुविधा प्रदान करयत छै.

इस पेज पर

कोना काज करैत अछि

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

.progressहम प्रगति बार के अधिकतम मान दर्शाबय लेल रैपर के रूप में प्रयोग करैत छी |
.progress-barहम सब एखन धरि के प्रगति के संकेत करय लेल भीतर के प्रयोग करैत छी ।
द .progress-barकें अपन चौड़ाई सेट करय कें लेल एकटा इनलाइन शैली, उपयोगिता वर्ग, या कस्टम CSS कें आवश्यकता होयत छै.
द .progress-barकें सेहो एकरा सुलभ बनावा कें लेल किछ roleआ ariaविशेषताक कें आवश्यकता छै, जइ मे एकटा सुलभ नाम ( aria-label, aria-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.

२५% २.

एचटीएमएल

<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 मे जोड़ा गेल

बूटस्ट्रैप कें विकसित CSS चर दृष्टिकोण कें हिस्सा कें रूप मे, प्रगति बार आब .progressबढ़ल वास्तविक समय अनुकूलन कें लेल स्थानीय CSS चर पर उपयोग करय छै. 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; }
  }
}