Bootstrap 5 Progress Bar

Base progress bar

Ang progress bar ay maaaring gamitin upang ipakita ang progreso ng user sa isang proseso.

Upang gumawa ng default na progress bar, magdagdag ng .progress Magdagdag ng klase sa elemento ng container at magpakita ng .progress-bar Magdagdag ng klase sa mga anak nito. Gamitin ang CSS width property upang itakda ang lapad ng progress bar:

Mga Halimbawa

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

Subukan Ngayon

Taas ng progress bar

Ang taas ng progress bar ay kasalukuyang 1rem（karaniwan na 16px）。Gumamit ng CSS height Atributo upang baguhin ito.

Mga tagubilin:Pansin: Dapat ay magkakapareho ang taas ng container ng progress at ang progress bar:

Mga Halimbawa

<div class="progress" style="height:20px">
  <div class="progress-bar" style="width:40%;height:20px"></div>
</div>

Subukan Ngayon

Tiket sa progress bar

Magdagdag ng teksto sa loob ng progress bar upang ipakita ang makikitang porsyento:

Mga Halimbawa

<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

Subukan Ngayon

Mga kulay na progress bar

Sa kasalukuyan, ang progress bar ay ang kulay ng asul (pangunahin). Gamitin ang anumang klase ng background context upang baguhin ang kanyang kulay:

Mga Halimbawa

<!-- Blue -->
<div class="progress">
  <div class="progress-bar" style="width:10%"></div>
</div>
<!-- Green -->
<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>
<!-- Turquoise -->
<div class="progress">
  <div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
   <div class="progress-bar bg-warning" style="width:40%"></div>
</div>
<!-- Red -->
<div class="progress">
  <div class="progress-bar bg-danger" style="width:50%"></div>
</div>
<!-- White -->
<div class="progress border">
  <div class="progress-bar bg-white" style="width:60%"></div>
</div>
<!-- Grey -->
<div class="progress">
  <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>
<!-- Light Grey -->
<div class="progress border">
  <div class="progress-bar bg-light" style="width:80%"></div>
</div>
<!-- Dark Grey -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div>

Subukan Ngayon

Striped Progress Bar

Gamitin ang .progress-bar-striped Mga klase upang idagdag sa progress bar ng stripes:

Mga Halimbawa

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>

Subukan Ngayon

Animadong progress bar

Magdagdag ng .progress-bar-animated Mga klase upang gumawa ng animadong progress bar:

Mga Halimbawa

<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>

Subukan Ngayon

Maraming progress bar

Ang progress bar ay maaaring pinalamigin:

Mga Halimbawa

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    Free Space
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    Warning
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    Danger
  </div>
</div>

Subukan Ngayon