Body Color:
Menu Color:
Main Color:
Banner Background:
  • background1
  • background2
  • background3
  • background4
  • background5
  • background6
  • background7
  • background8
  • background9
  |  Register
You are here : Features  >  Typography  >  Progress bar
Tuesday , November , 12 2024

Progress bar

Basic

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

Striped

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

Animated

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

Stacked

<div class="progress">
  <div class="bar bar-success" style="width: 35%;"></div>
  <div class="bar bar-warning" style="width: 20%;"></div>
  <div class="bar bar-danger" style="width: 10%;"></div>
</div>

Additional colors

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

Striped bars

<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>
Top