प्रगती

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

या पृष्ठावर

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

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

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

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

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