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-barbak nid sɔm roleɛn ariaatribyut dɛn fɔ mek i aksesbul, inklud wan aksesbul nem (yuz aria-label, aria-labelledby, ɔ di sem tin).

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

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>

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.

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>

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 .

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>

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.

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>

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.

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>

Fɔ gi minin to ɛtɛknɔlɔji dɛn we de ɛp

Yuz kala fɔ ad minin de jɔs gi wan vijual indikashɔn, we dɛn nɔ go gi to di wan dɛn we de yuz ɛtɛknɔlɔji dɛn we de ɛp – lɛk skrin rida dɛn. Mek shɔ se di infɔmeshɔn we dɛn sho wit di kɔlɔ de sho klia wan frɔm di tin we de insay insɛf (ɛgz. di tɛks we yu de si), ɔ dɛn put am insay ɔda we dɛn, lɛk ɔda tɛks we dɛn ayd wit di .visually-hiddenklas.

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.

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>

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

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>

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.

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 we dɛn kɔl CSS

Di tin dɛn we kin chenj

Dɛn ad am na v5.2.0

As pat pan Bootstrap in evolvin CSS vɛriɔbul dɛn aprɔch, prɔgrɛs bar dɛn naw de yuz lokal CSS vɛriɔbul dɛn pan .progressfɔ ɛnhans rial-taym kɔstɔmayshɔn. Valyu fɔ di CSS vɛriɔbul dɛn de sɛt via Sass, so Sass kɔstɔmayshɔn stil de sɔpɔt, bak.

  --#{$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 di vayriɔbul dɛn

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