प्रगती

स्टॅक केल्ले बार, एनिमेटेड पार्श्वभूंय, आनी मजकूर लेबलांखातीर आदार दिवपी Bootstrap सानुकूल प्रगती बार वापरपाखातीर दस्तावेजीकरण आनी उदाहरणां.

ह्या पानाचेर

कशें काम करता

प्रगती घटक दोन HTML घटकां वांगडा तयार केल्ले आसतात, कांय CSS रुंदाय सेट करपाक, आनी कांय गुणधर्मां. आमी HTML5 <progress>घटक वापरनात , तुमी प्रगती बार स्टॅक करूंक शकतात, तांकां एनिमेट करूंक शकतात, आनी तांचेर मजकूर लेबलां दवरूंक शकतात हाची खात्री करून.

आमी .progressप्रगती बाराचे चडांत चड मोल दाखोवपाक as a wrapper वापरतात.
.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;

कीफ्रेम हांचो आस्पाव जाता

खातीर CSS अॅनिमेशन तयार करपाखातीर वापरतात .progress-bar-animated. हातूंत आस्पाव केला scss/_progress-bar.scss.

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