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

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>

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

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

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

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

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

+29°C

+29°C

+20°C

+17°C

+18°C

+16°C

+29°C

Search Settings

Safe Search Filtering

Search Suggestions

Search History

Custom Search Preferences

user management

data visualization

security protocols

authentication methods

Data Table

Total $3,468.00

Laura Monaldo

Free Plan

Progress

Progress Bars Basic

Progress Bars Light With Text

Striped Progress With Animation

Progress Sizes

The Real Time Example

Admin Customizer

Sidebar option

Layout option

Color Hint

Text size

+29°C

+29°C

+20°C

+17°C

+18°C

+16°C

+29°C

Search Settings

Safe Search Filtering

Search Suggestions

Search History

Custom Search Preferences

user management

data visualization

security protocols

authentication methods

Data Table

Total $3,468.00

Laura Monaldo

Free Plan

Progress

Progress Bars Basic

Progress Bars Light With Text

Striped Progress With Animation

Progress Sizes

The Real Time Example

Admin Customizer

Sidebar option

Layout option

Color Hint

Text size