प्रगती

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

ह्या पानाचेर

कशें काम करता

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

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

Bootstrap च्या विकसीत जावपी 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; }
  }
}