પ્રગતિ

સ્ટેક્ડ બાર, એનિમેટેડ બેકગ્રાઉન્ડ અને ટેક્સ્ટ લેબલ્સ માટે સપોર્ટ દર્શાવતા બુટસ્ટ્રેપ કસ્ટમ પ્રોગ્રેસ બારનો ઉપયોગ કરવા માટે દસ્તાવેજીકરણ અને ઉદાહરણો.

આ પૃષ્ઠ પર

તે કેવી રીતે કામ કરે છે

પ્રોગ્રેસ ઘટકો બે 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};

Sass ચલો

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