in English

प्रगती

स्टॅक केलेले बार, अॅनिमेटेड पार्श्वभूमी आणि मजकूर लेबल्ससाठी समर्थन वैशिष्ट्यीकृत बूटस्ट्रॅप सानुकूल प्रगती बार वापरण्यासाठी दस्तऐवजीकरण आणि उदाहरणे.

या पृष्ठावर

हे कसे कार्य करते

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

.progressप्रोग्रेस बारचे कमाल मूल्य दर्शविण्यासाठी आम्ही रॅपर म्हणून वापरतो .
.progress-barआतापर्यंतची प्रगती दर्शवण्यासाठी आम्ही आतील वापरतो .
त्यांची रुंदी सेट करण्यासाठी .progress-barइनलाइन शैली, उपयुक्तता वर्ग किंवा सानुकूल CSS आवश्यक आहे.
प्रवेश करण्यायोग्य नावासह (वापरून , , किंवा तत्सम) प्रवेश करण्यायोग्य करण्यासाठी काही आणि विशेषता .progress-barदेखील आवश्यक आहेत.roleariaaria-labelaria-labelledby

ते सर्व एकत्र ठेवा आणि तुमच्याकडे खालील उदाहरणे आहेत.

html

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

रुंदी सेट करण्यासाठी बूटस्ट्रॅप मूठभर उपयुक्तता प्रदान करते . तुमच्या गरजांवर अवलंबून, हे त्वरीत प्रगती कॉन्फिगर करण्यात मदत करू शकतात.

html

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

२५%

html

<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आपोआप त्यानुसार आकार बदलेल.

html

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

पार्श्वभूमी

वैयक्तिक प्रगती बारचे स्वरूप बदलण्यासाठी पार्श्वभूमी उपयुक्तता वर्ग वापरा.

html

<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वर्गात लपवलेला अतिरिक्त मजकूर.

अनेक बार

तुम्हाला आवश्यक असल्यास प्रगती घटकामध्ये एकाधिक प्रगती बार समाविष्ट करा.

html

<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

html

<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

html

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

CSS

चल

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

Sass चल

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