Ŋgᴐyiyi

Nuŋlɔɖiwo kple kpɔɖeŋuwo na Bootstrap ƒe ŋgɔyiyi ƒe dzesi siwo wowɔ ɖe ɖoɖo nu zazã siwo me kpekpeɖeŋu le na fli siwo woƒo ƒu, megbenya siwo me agbe le, kple nuŋɔŋlɔ ƒe dzesiwo.

Le axa sia dzi

Ale si wòwɔa dɔe

Wotu ŋgɔyiyi ƒe akpawo kple HTML ƒe akpa eve, CSS aɖewo tsɔ ɖo kekeme, kple nɔnɔme ʋee aɖewo. Míezãa HTML5 <progress>element la o , míekpɔa egbɔ be àteŋu aƒo ŋgɔyiyi ƒe fliwo nu ƒu, awɔ agbe, eye nàda nuŋɔŋlɔ ƒe dzesiwo ɖe wo dzi.

Míezãa .progressas a wrapper tsɔ fiaa max value si le progress bar la ŋu.
Míezãa ememetɔa .progress-bartsɔ fiaa ŋgɔyiyi si wowɔ vaseɖe fifia.
The .progress-barbia be woawɔ atsyã si le fli me, dɔwɔnu ƒe hatsotso, alo CSS si wowɔ ɖe ɖoɖo nu be woaɖo woƒe kekeme.
The .progress-barhã bia ɖewo rolekple arianɔnɔmewo be wòate ŋu aɖo eŋu.

Ne ètsɔ nya mawo katã ƒo ƒui, eye kpɔɖeŋu siwo gbɔna la le asiwò.

<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 naa dɔwɔnu ʋɛ aɖewo hena kekeme ɖoɖo . Le wò hiahiãwo nu la, esiawo ate ŋu akpe ɖe ŋuwò le ŋgɔyiyi ƒe ɖoɖowɔwɔ kabakaba me.

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

Ŋkɔwo ƒe ŋkɔwo

Tsɔ dzesiwo kpe ɖe wò ŋgɔyiyi ƒe dzesiwo ŋu to nuŋɔŋlɔwo dede .progress-bar.

25% ƒe xexlẽme.

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

Kᴐkᴐme

Míeɖo heightasixɔxɔ aɖe ko ɖe .progress, eyata ne ètrɔ asixɔxɔ ma la, ememetɔa atrɔ eƒe .progress-barlolome le eɖokui si ɖe edzi.

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

Nusiwo dzɔ le megbe

Zã megbenyawo ƒe dɔwɔnu ƒe klasswo nàtsɔ atrɔ ŋgɔyiyi ƒe dzesi ɖekaɖekawo ƒe dzedzeme.

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

Ati geɖe siwo wotsɔna ƒoa nui

De ŋgɔyiyi ƒe dzesi geɖewo ŋgɔyiyi ƒe akpa aɖe me ne èhiã.

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

Ʋuʋudediwo le eŋu

Tsɔ kpe .progress-bar-stripedɖe ɖesiaɖe .progress-barŋu be nàtsɔ fli aɖe ade CSS ƒe ʋuʋudedi dzi ɖe ŋgɔyiyi ƒe dzesi ƒe megbe amadede dzi.

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

Fli siwo me agbe le

Woate ŋu awɔ nɔnɔmetata si le fli me la hã. Tsɔ kpe .progress-bar-animatedɖe eŋu .progress-barbe nàna fliawo nawɔ dɔ le ɖusime yi miame to CSS3 ƒe nɔnɔmetatawo dzi.

<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 ƒe nyawo

Nusiwo trɔna

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

Keyframewo ƒe nɔnɔmetatawo

Wozãnɛ hena CSS ƒe nɔnɔmetatawo wɔwɔ na .progress-bar-animated. Wo dometɔ aɖewoe nye scss/_progress-bar.scss.

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