పురోగతి

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

ఈ పేజీలో

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

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

.progressప్రోగ్రెస్ బార్ యొక్క గరిష్ట విలువను సూచించడానికి మేము ఒక రేపర్‌గా ఉపయోగిస్తాము.
.progress-barఇప్పటివరకు పురోగతిని సూచించడానికి మేము లోపలి భాగాన్ని ఉపయోగిస్తాము .
వాటి .progress-barవెడల్పును సెట్ చేయడానికి ఇన్‌లైన్ స్టైల్, యుటిలిటీ క్లాస్ లేదా కస్టమ్ CSS అవసరం.
యాక్సెస్ చేయగల పేరు (ఉపయోగించి , , లేదా ఇలాంటివి) తో సహా దీన్ని ప్రాప్యత చేయడానికి .progress-barకొన్ని roleమరియు గుణాలు కూడా అవసరం.ariaaria-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.

25%

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

సాస్ వేరియబుల్స్

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