પ્રગતિ

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

આ પૃષ્ઠ પર

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

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

સસ

ચલો

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