in English

Go bifo

Dokumɛnt ɛn ɛgzampul dɛn fɔ yuz Bootstrap kɔstɔm prɔgrɛs ba dɛn we gɛt sɔpɔt fɔ stak ba dɛn, animɛt bakgrɔn dɛn, ɛn tɛks lɛbl dɛn.

Na dis pej

Aw i de wok

Dɛn bil di prɔgrɛs kɔmpɔnɛnt dɛn wit tu HTML ɛlimɛnt dɛn, sɔm CSS fɔ sɛt di wit, ɛn sɔm atribyut dɛn. Wi nɔ de yuz di HTML5 <progress>ɛlimɛnt , fɔ mek shɔ se yu kin stak di prɔgrɛs bar dɛn, animate dɛn, ɛn put tɛks lɛbl dɛn oba dɛn.

Wi de yuz di .progressas a wrapper fɔ sho di maks valyu fɔ di prɔgrɛs bar.
Wi de yuz di insay .progress-barfɔ sho di prɔgrɛs we dɔn de te naw.
Di .progress-barnid fɔ gɛt inlayn stayl, yutiliti klas, ɔ kɔstɔm CSS fɔ sɛt dɛn wit.
Di .progress-bartu nid sɔm roleɛn ariaatribyut dɛn fɔ mek i aksesbul.

Put dat ɔl togɛda, ɛn yu gɛt dɛn ɛgzampul dɛn ya.

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

Bootstrap de gi wan anful yutiliti fɔ sɛt wit . Dipen pan wetin yu nid, dɛn tin ya kin ɛp fɔ kɔnfigyut di prɔgrɛs kwik kwik wan.

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Lebul dɛn

Ad lɛbl dɛn to yu prɔgrɛs bar dɛn bay we yu put tɛks insay di .progress-bar.

25% na di .

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

Ayt

Wi jɔs de sɛt heightvalyu pan di .progress, so if yu chenj da valyu de di insay .progress-bargo ɔtomɛtik chenj di sayz akɔdin to am.

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

Bakgrɔn dɛn

Yuz bakgrɔn yutiliti klas dɛn fɔ chenj di we aw wan wan prɔgrɛs bar dɛn de luk.

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

Bɔku bɔku bar dɛn

Inklud bɔku prɔgrɛs bar dɛn na wan prɔgrɛs kɔmpɔnɛnt if yu nid.

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

Striped we gɛt strɛp

Ad .progress-bar-stripedto ɛni wan .progress-barfɔ aplay wan strɛp via CSS gradient oba di prɔgrɛs bar in bakgrɔn kɔlɔ.

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

Strip dɛn we gɛt animɛt

Di strɛp gradient kin gɛt animashɔn bak. Add .progress-bar-animatedto .progress-barfɔ animate di strɛp dɛn rayt to lɛft via CSS3 animashɔn dɛn.

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

Sass we bin de

Di tin dɛn we kin chenj

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

Kifrɛm dɛn

Yuz fɔ mek di CSS animashɔn dɛn fɔ .progress-bar-animated. Insay de insay scss/_progress-bar.scss.

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}