Source

పురోగతి

బూట్‌స్ట్రాప్ కస్టమ్ ప్రోగ్రెస్ బార్‌లను ఉపయోగించడం కోసం డాక్యుమెంటేషన్ మరియు ఉదాహరణలు పేర్చబడిన బార్‌లు, యానిమేటెడ్ బ్యాక్‌గ్రౌండ్‌లు మరియు టెక్స్ట్ లేబుల్‌లకు మద్దతును కలిగి ఉంటాయి.

అది ఎలా పని చేస్తుంది

ప్రోగ్రెస్ భాగాలు రెండు HTML మూలకాలు, వెడల్పును సెట్ చేయడానికి కొన్ని CSS మరియు కొన్ని లక్షణాలతో నిర్మించబడ్డాయి. మేము HTML5 <progress>మూలకాన్ని ఉపయోగించము , మీరు ప్రోగ్రెస్ బార్‌లను పేర్చవచ్చు, వాటిని యానిమేట్ చేయవచ్చు మరియు వాటిపై టెక్స్ట్ లేబుల్‌లను ఉంచవచ్చు.

  • .progressప్రోగ్రెస్ బార్ యొక్క గరిష్ట విలువను సూచించడానికి మేము ఒక రేపర్‌గా ఉపయోగిస్తాము.
  • .progress-barఇప్పటివరకు పురోగతిని సూచించడానికి మేము లోపలి భాగాన్ని ఉపయోగిస్తాము .
  • వాటి .progress-barవెడల్పును సెట్ చేయడానికి ఇన్‌లైన్ స్టైల్, యుటిలిటీ క్లాస్ లేదా కస్టమ్ CSS అవసరం.
  • దీన్ని ప్రాప్యత చేయడానికి .progress-barకొన్ని roleమరియు లక్షణాలు కూడా అవసరం .aria

అన్నింటినీ కలిపి ఉంచండి మరియు మీకు ఈ క్రింది ఉదాహరణలు ఉన్నాయి.

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

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