Bootstrap 5 ప్రొగ్రెస్ బార్

బేస్ ప్రగతి పట్టిక

ప్రగతి పట్టిక వినియోగించబడుతుంది మీరు కొన్ని ప్రక్రియలో వినియోగదారు ప్రగతిని చూపించడానికి.

మూల ప్రగతి పట్టికను సెట్ చేయడానికి .progress క్లాస్ ను కంటైనర్ అంశాలకు జోడించండి మరియు .progress-bar క్లాస్ ను కుమారులకు జోడించండి. ప్రగతి పట్టిక వెడల్పనను సిఎస్ఎస్ width అనువర్తించండి:

ఉదాహరణ

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

స్వయంగా ప్రయత్నించండి

ప్రగతి పట్టిక ఎత్తు

ప్రగతి పట్టిక ఎత్తు మూలంగా 1rem（సాధారణంగా 16px）。సిఎస్ఎస్ ఉపయోగించండి: 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>

స్వయంగా ప్రయత్నించండి