Progress

Progress Bars Basic
<div class="card">
  <div class="card-header">
    <h5>Progress Bars Basic</h5>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="d-flex gap-3 flex-wrap">
        <div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-primary" style="width: 12.5%"></div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-secondary" style="width: 25%"></div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-success" style="width: 37.5%"></div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-danger" style="width: 50%"></div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-warning" style="width: 62.5%"></div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-info" style="width: 75%"></div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="82.5" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-light" style="width: 82.5%"></div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-dark" style="width: 95%"></div>
        </div>
      </div>
    </div>
  </div>
</div>
Progress Bars Light With Text
12.5%
25%
37.5%
50%
62.5%
75%
82.5%
95%
<div class="card">
  <div class="card-header">
    <h5>Progress Bars light with text</h5>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="d-flex gap-3 flex-wrap">
        <div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-light-primary" style="width: 12.5%"> 12.5% </div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-light-secondary" style="width: 25%"> 25% </div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-light-success" style="width: 37.5%"> 37.5% </div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-light-danger" style="width: 50%"> 50% </div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-light-warning" style="width: 62.5%"> 62.5% </div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-light-info" style="width: 75%"> 75% </div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="82.5" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-light-light" style="width: 82.5%"> 82.5% </div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-light-dark" style="width: 95%"> 95% </div>
        </div>
      </div>
    </div>
  </div>
</div>
Striped Progress With Animation
12.5%
25%
37.5%
50%
62.5%
75%
82.5%
95%
<div class="card">
  <div class="card-header">
    <h5>Striped Progress with animation</h5>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="d-flex gap-3 flex-wrap">
        <div class="progress w-100" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-primary progress-bar-striped" style="width: 12.5%"> 12.5% </div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-secondary progress-bar-striped progress-bar-animated" style="width: 25%"> 25% </div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 37.5%"> 37.5% </div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width: 50%"> 50% </div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width: 62.5%"> 62.5% </div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width: 75%"> 75% </div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="82.5" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-light progress-bar-striped progress-bar-animated" style="width: 82.5%"> 82.5% </div>
        </div>
        <div class="progress w-100" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
          <div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" style="width: 95%"> 95% </div>
        </div>
      </div>
    </div>
  </div>
</div>
Progress Sizes
This is normal size
This is normal size
height 15px
height 15px
height 20px
height 25px
<div class="card">
  <div class="card-header">
    <h5>Progress Sizes</h5>
  </div>
  <div class="card-body d-flex flex-column gap-3">
    <div class="progress h-5">
      <div class="progress-bar bg-primary h-5" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;"></div>
    </div>
    <div class="progress">
      <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">This is normal size</div>
    </div>
    <div class="progress">
      <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">This is normal size</div>
    </div>
    <div class="progress h-15">
      <div class="progress-bar bg-success h-15" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"> height 15px</div>
    </div>
    <div class="progress h-15">
      <div class="progress-bar bg-info h-15" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> height 15px</div>
    </div>
    <div class="progress h-20">
      <div class="progress-bar bg-danger h-20" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"> height 20px</div>
    </div>
    <div class="progress h-25">
      <div class="progress-bar bg-warning h-25" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> height 25px</div>
    </div>
  </div>
</div>
The Real Time Example
Loading data...
75% Processing
52% Updating..
1 Min
Deleting data (85% remain)
1 Min left
<div class="card">
  <div class="card-header">
    <h5>The real time example</h5>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-md-6 mb-3">
        <div class="d-flex gap-3 flex-wrap">
          <div class="progress-box bg-light-primary w-100">
            <div class="progress-content">
              <div>
                <div class="left d-flex align-items-center">
                  <span class="spinner-border spinner-border-sm me-2 ms-2" role="status" aria-hidden="true"></span>
                  Loading data...
                </div>
                <div class="right">
                  <i class="fa fa-close"></i>
                </div>
              </div>
            </div>
            <div class="progress w-100 h-5" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
              <div class="progress-bar bg-primary h-5" style="width: 100%"></div>
            </div>
          </div>
          <div class="progress-box bg-light-secondary w-100">
            <div class="progress-content">
              <div>
                <div class="left d-flex align-items-center">
                  <b class="me-1 ms-1">75%</b> Processing
                </div>
                <div class="right">
                  <i class="fa fa-close"></i>
                </div>
              </div>
            </div>
            <div class="progress w-100 h-5" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
              <div class="progress-bar bg-secondary h-5" style="width: 75%"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="d-flex gap-3 flex-wrap">
          <div class="progress-box bg-light-success w-100">
            <div class="progress-content">
              <div>
                <div class="left d-flex align-items-center">
                  <b class="me-1 ms-1">52%</b> Updating..
                </div>
                <div class="right">
                  <span class="badge text-bg-success">1 Min</span>
                </div>
              </div>
            </div>
            <div class="progress w-100 h-5" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
              <div class="progress-bar bg-success h-5" style="width: 52%"></div>
            </div>
          </div>
          <div class="progress-box bg-light-danger w-100">
            <div class="progress-content">
              <div>
                <div class="left d-flex align-items-center">
                  <i class="ti ti-trash me-1 ms-1"></i> Deleting data <small> (85% remain)</small>
                </div>
                <div class="right">
                  <span class="badge text-bg-danger">1 Min left</span>
                </div>
              </div>
            </div>
            <div class="progress w-100 h-5" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
              <div class="progress-bar bg-danger h-5" style="width: 15%"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Admin Customizer

it's time to style according to your choice ..!

Sidebar option
    • Vertical
    • Horizontal
    • Dark
Layout option
    • LTR
    • RTL
    • Box
Color Hint
Text size
  • sm
  • md
  • lg
Buy Now
SupportDocument