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