Pag-uswag

Dokumentasyon ug mga pananglitan sa paggamit sa Bootstrap custom progress bars nga adunay suporta alang sa stacked bars, animated backgrounds, ug text labels.

Niini nga panid

Giunsa kini paglihok

Ang mga sangkap sa pag-uswag gitukod nga adunay duha ka elemento sa HTML, pipila ka CSS aron itakda ang gilapdon, ug pipila ka mga hiyas. Dili namo gamiton ang HTML5 <progress>nga elemento , pagsiguro nga mahimo nimong i-stack ang mga progress bar, i-animate kini, ug ibutang ang mga text label sa ibabaw niini.

Gigamit namon ang .progressingon usa ka wrapper aron ipakita ang labing taas nga kantidad sa progress bar.
Gigamit namon ang sulud .progress-bararon ipakita ang pag-uswag hangtod karon.
Ang .progress-barnanginahanglan usa ka inline nga istilo, klase sa utility, o naandan nga CSS aron mabutang ang ilang gilapdon.
Ang .progress-barnagkinahanglan usab og pipila roleug ariamga hiyas aron mahimo kini nga ma-access, lakip ang usa ka accessible nga ngalan (gamit ang aria-label, aria-labelledby, o susama).

Ibutang kanang tanan, ug aduna kay mosunod nga mga pananglitan.

html

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

Naghatag ang Bootstrap og pipila ka mga gamit alang sa pagtakda sa gilapdon . Depende sa imong mga panginahanglan, kini mahimong makatabang sa dali nga pag-configure sa pag-uswag.

html

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

Mga label

Idugang ang mga label sa imong progress bar pinaagi sa pagbutang og teksto sulod sa .progress-bar.

25%

html

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

Gitas-on

Nagbutang lang kami og heightbili sa .progress, mao nga kung imong usbon kana nga kantidad ang sulod .progress-barawtomatik nga magbag-o sumala niana.

html

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

Mga background

Gamita ang mga klase sa gamit sa background aron mabag-o ang hitsura sa indibidwal nga mga bar sa pag-uswag.

html

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

Paghatag kahulogan sa mga teknolohiya sa pagtabang

Ang paggamit og kolor aron makadugang og kahulogan naghatag lamang og biswal nga indikasyon, nga dili ipaabot ngadto sa mga tiggamit sa mga teknolohiyang makatabang – sama sa mga screen reader. Siguruha nga ang impormasyon nga gipaila sa kolor mahimong dayag gikan sa sulod mismo (pananglitan ang makita nga teksto), o gilakip pinaagi sa alternatibong paagi, sama sa dugang nga teksto nga gitago sa .visually-hiddenklase.

Daghang mga bar

Ilakip ang daghang mga progress bar sa usa ka bahin sa pag-uswag kung kinahanglan nimo.

html

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

Kinudlisan

Idugang .progress-bar-stripedsa bisan unsa .progress-bararon magamit ang usa ka stripe pinaagi sa CSS gradient ibabaw sa kolor sa background sa progress bar.

html

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

Animated nga mga stripe

Ang striped gradient mahimo usab nga animated. Idugang .progress-bar-animatedsa .progress-bararon ma-animate ang mga labud sa tuo ngadto sa wala pinaagi sa CSS3 nga mga animation.

html

<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

Mga variable

Gidugang sa v5.2.0

Isip kabahin sa nag-uswag nga CSS variables approach sa Bootstrap, ang progress bars karon naggamit sa lokal nga CSS variables .progressalang sa gipaayo nga real-time nga pag-customize. Ang mga kantidad alang sa mga variable sa CSS gitakda pinaagi sa Sass, busa ang pag-customize sa Sass gisuportahan usab.

  --#{$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 variables

$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

Gigamit alang sa paghimo sa mga animation sa CSS alang sa .progress-bar-animated. Apil sa scss/_progress-bar.scss.

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