Bootstrap 5 प्रगति पट्टी

बेसिक प्रगति पट्टी

प्रगति पट्टी उपयोगकर्ता को किसी प्रक्रिया में कितनी प्रगति हुई है इसे दिखाने के लिए है।

डिफ़ॉल्ट प्रगति पट्टी बनाने के लिए .progress को कंटेनर एलिमेंट को जोड़ें और .progress-bar कोई क्लास जोड़ें और उसके उप-एलिमेंट को।CSS width गुण का प्रयोग करके प्रगति पट्टी की चौड़ाई सेट करें:

उदाहरण

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

स्वयं प्रयोग करें

प्रगति पट्टी ऊंचाई

प्रगति पट्टी की ऊंचाई मूल रूप से 1rem（सामान्यतया 16px）。CSS का प्रयोग करके height गुण को परिवर्तित करने के लिए

सूचना:ध्यान दें कि आपको प्रगति भांतर और प्रगति पट्टी की ऊंचाई को एक-साथ सेट करना होगा:

उदाहरण

<div class="progress" style="height:20px">
  <div class="progress-bar" style="width:40%;height:20px"></div>
</div>

स्वयं प्रयोग करें

प्रगति पट्टी टैग

प्रगति पट्टी में पाठ जोड़कर दिखाए जाने वाली प्रतिशत दिखाएं:

उदाहरण

<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

स्वयं प्रयोग करें

रंगीन प्रगति पट्टी

मूळ रूप से, प्रगति पट्टी नीली है (मुख्य)। किसी भी परिप्रेक्ष्य पृष्ठभूमि वर्ग को प्रयोग करके इसे रंग बदलें:

उदाहरण

<!-- Blue -->
<div class="progress">
  <div class="progress-bar" style="width:10%"></div>
</div>
<!-- Green -->
<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>
<!-- Turquoise -->
<div class="progress">
  <div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
   <div class="progress-bar bg-warning" style="width:40%"></div>
</div>
<!-- Red -->
<div class="progress">
  <div class="progress-bar bg-danger" style="width:50%"></div>
</div>
<!-- White -->
<div class="progress border">
  <div class="progress-bar bg-white" style="width:60%"></div>
</div>
<!-- ग्रे -->
<div class="progress">
  <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>
<!-- हल्का ग्रे -->
<div class="progress border">
  <div class="progress-bar bg-light" style="width:80%"></div>
</div>
<!-- गहरा ग्रे -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div>

स्वयं प्रयोग करें

तिनकार प्रगति चित्र

कृपया इस्तेमाल करें .progress-bar-striped क्लास प्रगति चित्र में तिनकार को जोड़ें:

उदाहरण

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>

स्वयं प्रयोग करें

प्रगति चित्र एनीमेशन

कृपया जोड़ें .progress-bar-animated क्लास के द्वारा प्रगति चित्र एनीमेशन बनाने के लिए:

उदाहरण

<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>

स्वयं प्रयोग करें

अनेक प्रगति चित्र

प्रगति चित्र भी ढेर में हो सकता है:

उदाहरण

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    फ्री स्पेस
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    चेतावनी
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    खतरा
  </div>
</div>

स्वयं प्रयोग करें