मुख्य सामग्री पर जाओ डॉक्स नेविगेशन पर जाओ
in English

तरक्की

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

इस पेज पर

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

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

  • अस .progressप्रगति बार दे मैक्स वैल्यू गी दर्शाने आस्तै रैपर दे रूप च इस्तेमाल करदे आं ।
  • .progress-barअस अजे तकर दी प्रगति गी दर्शाने आस्तै अंदरूनी दा इस्तेमाल करदे आं ।
  • दी .progress-barअपनी चौड़ाई सेट करने आस्तै इक इनलाइन शैली, उपयोगिता वर्ग, जां कस्टम CSS दी लोड़ ऐ.
  • द बी इसगी सुलभ बनाने .progress-barलेई किश roleते गुणें दी लोड़ ऐ।aria

उस सब गी इकट्ठा करो, ते तुंदे कोल निम्नलिखित उदाहरण न।

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" 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-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

लेबल लगाए

दे अंदर पाठ रक्खियै अपनी प्रगति पट्टी च लेबल जोड़ो .progress-bar.

२५% ऐ। 
<div class="progress">
  <div class="progress-bar" role="progressbar" 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" 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" 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" 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" 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" 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" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

कई बार

जेकर तुसेंगी लोड़ ऐ तां इक प्रगति घटक च मते सारे प्रगति पट्टी शामल करो।

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" 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" 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" 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" 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" 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" 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-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

सस्स

चर करने वाले

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