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 kinaiya. 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.
Nanginahanglan .progress-barusab ang pipila roleug ariamga hiyas aron mahimo kini nga ma-access.

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

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

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.

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" 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%

<div class="progress">
  <div class="progress-bar" role="progressbar" 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.

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

Mga background

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

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

Daghang mga bar

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

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

Kinudlisan

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

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

Animated nga mga stripe

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

<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

Mga variable

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