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ɛ binom rolene ariasu ahorow na ama wɔatumi akɔ so, a edin a wotumi kɔ so (de aria-label, aria-labelledby, anaa nea ɛte saa di dwuma) ka ho.

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

html na ɛwɔ hɔ

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

html na ɛwɔ hɔ

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

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

html na ɛwɔ hɔ

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

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.

html na ɛwɔ hɔ

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

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.

html na ɛwɔ hɔ

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

Ntease a wɔde bɛma mfiridwuma ahorow a ɛboa

Kɔla a wɔde di dwuma de ntease ka ho no ma wonya sɛnkyerɛnne a wotumi hu nkutoo, a wɔremfa nkɔma wɔn a wɔde mfiridwuma a ɛboa di dwuma – te sɛ screen akenkanfo. Hwɛ sɛ nsɛm a wɔde kɔla no kyerɛ no da adi pefee fi emu nsɛm no ankasa mu (sɛ nhwɛso no, nsɛm a wotumi hu no), anaasɛ wɔde bɛka ho denam akwan foforo so, te sɛ nsɛm foforo a wɔde asie ne .visually-hiddenadesuakuw no mu.

Nnua ahorow pii

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

html na ɛwɔ hɔ

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

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.

html na ɛwɔ hɔ

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

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.

html na ɛwɔ hɔ

<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 a ɛwɔ hɔ no

Nneɛma a Ɛsakra

Wɔde aka ho wɔ v5.2.0 mu

Sɛ́ Bootstrap CSS nsakrae kwan a ɛrekɔ so no fã no, mprempren nkɔso nkyerɛwde ahorow de mpɔtam hɔ CSS nsakrae ahorow di dwuma wɔ so .progressma bere ankasa mu nsakrae a ɛkɔ anim. Wɔde Sass so ahyɛ CSS nsakraeɛ no botaeɛ, enti Sass nhyehyɛɛ no da so ara boa, nso.

  --#{$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 nsakrae ahorow

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