Progreso

Dokumentado kaj ekzemploj por uzi Bootstrap-adaptitajn progresbretojn kun subteno por stakitaj stangoj, viglaj fonoj kaj tekstaj etikedoj.

Sur ĉi tiu paĝo

Kiel ĝi funkcias

Progresaj komponantoj estas konstruitaj kun du HTML-elementoj, iuj CSS por agordi la larĝecon, kaj kelkaj atributoj. Ni ne uzas la HTML5- <progress>elementon , certigante ke vi povas stakigi progresbretojn, animi ilin kaj meti tekstajn etikedojn super ili.

Ni uzas la .progresskiel envolvaĵon por indiki la maksimuman valoron de la progresdrinkejo.
Ni uzas la internan .progress-barpor indiki la progreson ĝis nun.
La .progress-barpostulas enlinian stilon, utilklason aŭ kutiman CSS por agordi ilian larĝon.
La .progress-barankaŭ postulas kelkajn rolekaj ariaatributojn por fari ĝin alirebla.

Metu tion ĉion kune, kaj vi havas la sekvajn ekzemplojn.

<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 disponigas manplenon da utilecoj por agordi larĝon . Depende de viaj bezonoj, ĉi tiuj povas helpi rapide agordi progreson.

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

Etikedoj

Aldonu etikedojn al viaj progresbretoj metante tekston en la .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>

Alteco

Ni nur fiksas heightvaloron sur la .progress, do se vi ŝanĝas tiun valoron la interna .progress-baraŭtomate regrandigos laŭe.

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

Fonoj

Uzu fonajn utilajn klasojn por ŝanĝi la aspekton de individuaj progresbrikoj.

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

Multoblaj stangoj

Enmetu plurajn progresajn stangojn en progresa komponanto se vi bezonas.

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

Striita

Aldonu .progress-bar-stripedal iu ajn .progress-barpor apliki strion per CSS-gradiento super la fonkoloro de la progresbreto.

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

Viglaj strioj

La stria gradiento ankaŭ povas esti vigla. Aldonu .progress-bar-animatedal .progress-barpor animi la striojn dekstren al maldekstre per CSS3-animacioj.

<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

Variabloj

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

Ŝlosilkadroj

Uzita por krei la CSS-animaciojn por .progress-bar-animated. Inkludita en scss/_progress-bar.scss.

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