Pag-unlad

Dokumentasyon at mga halimbawa para sa paggamit ng Bootstrap custom progress bar na nagtatampok ng suporta para sa mga stacked bar, animated na background, at text label.

Sa pahinang ito

Paano ito gumagana

Ang mga bahagi ng pag-unlad ay binuo gamit ang dalawang elemento ng HTML, ilang CSS upang itakda ang lapad, at ilang mga katangian. Hindi namin ginagamit ang HTML5 <progress>element , na tinitiyak na maaari mong i-stack ang mga progress bar, i-animate ang mga ito, at maglagay ng mga text label sa ibabaw ng mga ito.

Ginagamit namin ang .progressbilang isang wrapper upang isaad ang max na halaga ng progress bar.
Ginagamit namin ang panloob .progress-barupang ipahiwatig ang pag-unlad sa ngayon.
Nangangailangan .progress-barang isang inline na istilo, klase ng utility, o custom na CSS upang maitakda ang kanilang lapad.
Ang .progress-bardin ay nangangailangan ng ilan roleat mga ariakatangian upang gawin itong naa-access.

Pagsama-samahin iyan, at mayroon kang mga sumusunod na halimbawa.

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

Nagbibigay ang Bootstrap ng ilang mga utility para sa pagtatakda ng lapad . Depende sa iyong mga pangangailangan, maaaring makatulong ang mga ito sa mabilis na pag-configure ng progreso.

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

Mga label

Magdagdag ng mga label sa iyong progress bar sa pamamagitan ng paglalagay ng text sa loob ng .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>

taas

Nagtatakda lang kami ng heightvalue sa .progress, kaya kung babaguhin mo ang value na iyon .progress-bar, awtomatikong magre-resize ang inner nang naaayon.

<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

Gumamit ng mga background utility class para baguhin ang hitsura ng mga indibidwal na progress bar.

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

Maramihang mga bar

Isama ang maramihang progress bar sa isang progress component kung kailangan mo.

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

may guhit

Idagdag .progress-bar-stripedsa alinman .progress-barupang maglapat ng stripe sa pamamagitan ng CSS gradient sa kulay ng background ng 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>

Mga animated na guhit

Ang striped gradient ay maaari ding gawing animated. Idagdag .progress-bar-animatedsa .progress-barupang i-animate ang mga guhit pakanan pakaliwa sa pamamagitan ng mga animation ng CSS3.

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

Mga Keyframe

Ginagamit para sa paglikha ng mga animation ng CSS para sa .progress-bar-animated. Kasama sa scss/_progress-bar.scss.

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