Kgatelopele

Ditokomane le mehlala ya go šomiša dibara tša tšwelopele ya tlwaelo tša Bootstrap tšeo di bontšhago thekgo ya dibara tše di kgobokeditšwego, dimelo tša dipopaye, le dileibole tša sengwalwa.

Letlakaleng le

Kamoo e šomago ka gona

Dikarolo tša tšwelopele di agilwe ka dielemente tše pedi tša HTML, tše dingwe tša CSS go beakanya bophara, le dika tše mmalwa. Ga re šomiše elemente ya HTML5<progress> , re netefatša gore o ka kgoboketša dibara tša tšwelopele, wa di phediša, le go bea dileibole tša sengwalwa godimo ga tšona.

Re šomiša .progressbjalo ka sephuthedi go laetša boleng bja max bja baara ya tšwelopele.
Re šomiša ya ka gare .progress-bargo laetša tšwelopele go fihla ga bjale.
The .progress-bare nyaka setaele sa ka gare ga mothaladi, sehlopha sa utility, goba CSS ya tlwaelo go beakanya bophara bja bona.
The .progress-bargape e nyaka tše dingwe rolele ariadika go e dira gore e fihlelelege.

Bea seo ka moka mmogo, gomme o na le mehlala ye e latelago.

<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 e fana ka seatla se se tletšego sa didirišwa tša go beakanya bophara . Go ithekgile ka dinyakwa tša gago, tše di ka thuša ka go beakanya tšwelopele ka pela.

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

Dileibole

Oketša dileibole go dibara tša gago tša tšwelopele ka go bea sengwalwa ka gare ga .progress-bar.

25% ya .

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

Bogodimo

Re bea fela heightboleng go .progress, ka fao ge o fetoša boleng bjoo bja ka gare .progress-barbo tla fetoša bogolo ka go iketla go ya ka fao.

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

Dimelo tša ka morago

Šomiša diklase tša mohola wa ka morago go fetoša ponagalo ya dibara tša tšwelopele ka botee.

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

Dibara tše dintši

Akaretša dibara tše ntši tša tšwelopele karolong ya tšwelopele ge o nyaka.

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

E na le methalo

Oketša .progress-bar-stripedgo efe goba efe .progress-bargo diriša mothalo ka CSS gradient godimo ga mmala wa morago wa baara ya tšwelopele.

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

Methalo ya dipopaye

The metsero gradient ka boela animated. Oketša .progress-bar-animatedgo .progress-bargo phediša methalo go le letona go ya go le letshadi ka dipopaye tša CSS3.

<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

Diphetogo

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

Diforeime tša bohlokwa

E šomišwa go hlama ditshwantšho tša dipopaye tša CSS tša .progress-bar-animated. E akareditšwe go scss/_progress-bar.scss.

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