तरक्की

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

इस पेज पर

किवें कम्म करदा है

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

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

२५% ऐ।

एचटीएमएल ऐ

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

कीफ्रेम दा

लेई सीएसएस एनीमेशन बनाने लेई बरतेआ जंदा ऐ .progress-bar-animated. में शामिल ऐ scss/_progress-bar.scss.

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