in English

Mpuntuo

Nwoma ne nhwɛsoɔ a wɔde bedi dwuma wɔ Bootstrap custom progress bars a ɛkyerɛ mmoa ma stacked bars, animated backgrounds, ne text labels.

Wɔ kratafa yi so

Sɛnea ɛyɛ adwuma

Wɔde HTML nneɛma abien na ɛkyekye nkɔso afã horow, CSS binom de hyehyɛ ntrɛwmu, ne su kakraa bi. Yɛmfa HTML5 <progress>element no nni dwuma , hwɛ hu sɛ wubetumi aboaboa nkɔso bar ahorow ano, ayɛ wɔn anigye, na wode nsɛm nkyerɛwde ahyɛ so.

Yɛde no di dwuma .progresssɛ wrapper de kyerɛ max value a ɛwɔ progress bar no mu.
Yɛde emu .progress-barnsɛm no kyerɛ nkɔso a aba de besi nnɛ.
The .progress-barhwehwɛ inline style, utility class, anaa custom CSS de ahyɛ wɔn trɛw.
The .progress-barnso hwehwɛ bi rolene ariasu ahorow na ama ayɛ nea wotumi nya.

Fa ɛno nyinaa bom, na woanya nhwɛso ahorow a edidi so yi.

<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 ma nsa kakraa bi a wɔde bedi dwuma de ahyɛ ntrɛwmu . Eyinom betumi agyina w’ahiade so aboa ma woasiesie nkɔso ntɛmntɛm.

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

Nneɛma a wɔde kyerɛw nsɛm

Fa nkyerɛwde ahorow ka wo nkɔso bar ahorow no ho denam nsɛm a wode bɛto .progress-bar.

25% na ɛwɔ hɔ.

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

Tenten

Yɛde heightbotae bi si .progress, enti sɛ wosakra saa botae no a, emu .progress-barno bɛsesa ne kɛse sɛnea ɛfata.

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

Nsɛm a Ɛwɔ Akyi Nsɛm

Fa akyi mfaso adesua ahorow di dwuma fa sesa ankorankoro nkɔso nkyerɛwde ahorow no hwɛbea.

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

Nnua ahorow pii

Fa nkɔsoɔ nsɛm pii ka nkɔsoɔ fã bi ho sɛ ɛhia a.

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

Ntrɛwmu

Fa ka .progress-bar-stripedbiara .progress-barho na fa stripe bi di dwuma denam CSS gradient so wɔ nkɔso bar no akyi kɔla no so.

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

Ntrɛwmu a wɔde mfonini ayɛ

Wobetumi nso ayɛ animation wɔ striped gradient no mu. Fa ka .progress-bar-animatedho na .progress-barama nsensanee no ayɛ adwuma wɔ nifa so akɔ benkum so denam CSS3 mfonini ahorow so.

<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

Nneɛma a Ɛsakra

$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 a wɔde di dwuma

Wɔde di dwuma de yɛ CSS animations no ma .progress-bar-animated. Nea ɛka ho wɔ scss/_progress-bar.scss.

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