Fremskridt

Dokumentation og eksempler på brug af Bootstrap-tilpassede fremskridtsbjælker med understøttelse af stablede bjælker, animerede baggrunde og tekstetiketter.

På denne side

Hvordan det virker

Progress-komponenter er bygget med to HTML-elementer, nogle CSS til at indstille bredden og nogle få attributter. Vi bruger ikke HTML5- <progress>elementet , hvilket sikrer, at du kan stable fremskridtslinjer, animere dem og placere tekstetiketter over dem.

Vi bruger .progresssom en indpakning til at angive den maksimale værdi af statuslinjen.
Vi bruger det indre .progress-bartil at indikere fremskridtene indtil videre.
Det .progress-barkræver en inline-stil, hjælpeklasse eller tilpasset CSS for at indstille deres bredde.
Den .progress-barkræver også nogle roleog ariaattributter for at gøre den tilgængelig, herunder et tilgængeligt navn (ved hjælp af aria-label, aria-labelledby, eller lignende).

Sæt det hele sammen, og du har følgende eksempler.

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 giver en håndfuld værktøjer til indstilling af bredde . Afhængigt af dine behov kan disse hjælpe med hurtigt at konfigurere fremskridt.

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>

Etiketter

Tilføj etiketter til dine statuslinjer ved at placere tekst i .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>

Højde

Vi sætter kun en heightværdi på .progress, så hvis du ændrer den værdi, vil den indre .progress-barautomatisk ændre størrelsen tilsvarende.

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>

Baggrunde

Brug baggrundsværktøjsklasser til at ændre udseendet af individuelle statuslinjer.

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>

Formidle mening til hjælpeteknologier

Brug af farve til at tilføje betydning giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier - såsom skærmlæsere. Sørg for, at oplysninger, der er angivet med farven, enten er tydelige fra selve indholdet (f.eks. den synlige tekst), eller er inkluderet via alternative måder, såsom ekstra tekst skjult i .visually-hiddenklassen.

Flere barer

Inkluder flere statuslinjer i en fremdriftskomponent, hvis du har brug for det.

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>

Stribet

Tilføj .progress-bar-stripedtil enhver .progress-barfor at anvende en stribe via CSS-gradient over statuslinjens baggrundsfarve.

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>

Animerede striber

Den stribede gradient kan også animeres. Tilføj .progress-bar-animatedtil .progress-barfor at animere striberne fra højre mod venstre via CSS3-animationer.

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

Variabler

Tilføjet i v5.2.0

Som en del af Bootstraps udviklende CSS-variabletilgang bruger fremskridtslinjer nu lokale CSS-variabler .progresstil forbedret realtidstilpasning. Værdier for CSS-variablerne indstilles via Sass, så Sass-tilpasning understøttes også stadig.

  --#{$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 variable

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

Keyframes

Bruges til at lave CSS-animationer til .progress-bar-animated. Inkluderet i scss/_progress-bar.scss.

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