Progress

Progress Bars Basic


                <div className="progress w-100" role="progressbar" aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100">
                  <div className="progress-bar bg-primary" style="width: 12.5%"></div>
                </div>

                <div className="progress w-100" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                  <div className="progress-bar bg-secondary" style="width: 25%"></div>
                </div>

                <div className="progress w-100" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100">
                  <div className="progress-bar bg-success" style="width: 37.5%"></div>
                </div>

                <div className="progress w-100" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
                  <div className="progress-bar bg-danger" style="width: 50%"></div>
                </div>

                <div className="progress w-100" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100">
                  <div className="progress-bar bg-warning" style="width: 62.5%"></div>
                </div>

                <div className="progress w-100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
                  <div className="progress-bar bg-info" style="width: 75%"></div>
                </div>

                <div className="progress w-100" role="progressbar" aria-valuenow="82.5" aria-valuemin="0" aria-valuemax="100">
                  <div className="progress-bar bg-light" style="width: 82.5%"></div>
                </div>

                <div className="progress w-100" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
                  <div className="progress-bar bg-dark" style="width: 95%"></div>
                </div>

Progress Bars Light With Text

12.5%

25%

37.5%

50%

62.5%

75%

82.5%

95%


<div className="progress w-100" role="progressbar" aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-light-primary" style="width: 12.5%"> 12.5% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-light-secondary" style="width: 25%"> 25% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-light-success" style="width: 37.5%"> 37.5% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-light-danger" style="width: 50%"> 50% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-light-warning" style="width: 62.5%"> 62.5% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-light-info" style="width: 75%"> 75% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="82.5" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-light-light" style="width: 82.5%"> 82.5% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-light-dark" style="width: 95%"> 95% </div>
</div>

Striped Progress With Animation

12.5%

25%

37.5%

50%

62.5%

75%

82.5%

95%


<div className="progress w-100" role="progressbar" aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-primary progress-bar-striped progress-bar-animated" style="width: 12.5%"> 12.5% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-secondary progress-bar-striped progress-bar-animated" style="width: 25%"> 25% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 37.5%"> 37.5% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width: 50%"> 50% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width: 62.5%"> 62.5% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width: 75%"> 75% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="82.5" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-light progress-bar-striped progress-bar-animated" style="width: 82.5%"> 82.5% </div>
</div>

<div className="progress w-100" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
  <div className="progress-bar bg-dark progress-bar-striped progress-bar-animated" style="width: 95%"> 95% </div>
</div>

Progress Sizes

12.5%

25%

37.5%

50%

62.5%

75%

82.5%

95%


  <div className="progress h-5">
    <div className="progress-bar bg-primary h-5" role="progressbar" aria-valuenow="12.5" aria-valuemin="0" aria-valuemax="100" style="width: 12.5%"> 12.5% </div>
  </div>

  <div className="progress h-6">
    <div className="progress-bar bg-secondary h-6" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%"> 25% </div>
  </div>

  <div className="progress h-7">
    <div className="progress-bar bg-success h-7" role="progressbar" aria-valuenow="37.5" aria-valuemin="0" aria-valuemax="100" style="width: 37.5%"> 37.5% </div>
  </div>

  <div className="progress h-8">
    <div className="progress-bar bg-danger h-8" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"> 50% </div>
  </div>

  <div className="progress h-9">
    <div className="progress-bar bg-warning h-9" role="progressbar" aria-valuenow="62.5" aria-valuemin="0" aria-valuemax="100" style="width: 62.5%"> 62.5% </div>
  </div>

  <div className="progress h-10">
    <div className="progress-bar bg-info h-10" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"> 75% </div>
  </div>

  <div className="progress h-11">
    <div className="progress-bar bg-light h-11" role="progressbar" aria-valuenow="82.5" aria-valuemin="0" aria-valuemax="100" style="width: 82.5%"> 82.5% </div>
  </div>

  <div className="progress h-12">
    <div className="progress-bar bg-dark h-12" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%"> 95% </div>
  </div>

The Real Time Example

Loading data...

75% Processing

52% Updating..

1 Min

Deleting data (85% remain)

1 Min left


<div className="d-flex gap-3 flex-wrap">
          <div className="progress-box bg-light-primary w-100">
            <div className="progress-content">
              <div>
                <div className="left d-flex align-items-center">
                  <span className="spinner-border spinner-border-sm me-2 ms-2" role="status" aria-hidden="true"></span>
                  
                  
                  Loading data...
                </div>
                <div className="right">
                  
                </div>
              </div>
            </div>
            <div className="progress w-100 h-5" role="progressbar" aria-valuenow="100" aria-valuemax="100">
              <div className="progress-bar bg-primary h-5" style="width: 100%">100%</div>
            </div>
          </div>
        </div>

<div className="d-flex gap-3 flex-wrap">
          <div className="progress-box bg-light-secondary w-100">
            <div className="progress-content">
              <div>
                <div className="left d-flex align-items-center">
                  
                  
                  
                  75% Processing
                </div>
                <div className="right">
                  
                </div>
              </div>
            </div>
            <div className="progress w-100 h-5" role="progressbar" aria-valuenow="75" aria-valuemax="100">
              <div className="progress-bar bg-secondary h-5" style="width: 75%">75%</div>
            </div>
          </div>
        </div>

<div className="d-flex gap-3 flex-wrap">
          <div className="progress-box bg-light-success w-100">
            <div className="progress-content">
              <div>
                <div className="left d-flex align-items-center">
                  
                  
                  
                  52% Updating..
                </div>
                <div className="right">
                  <span class="badge text-bg-success">1 Min</span>
                </div>
              </div>
            </div>
            <div className="progress w-100 h-5" role="progressbar" aria-valuenow="52" aria-valuemax="100">
              <div className="progress-bar bg-success h-5" style="width: 52%">52%</div>
            </div>
          </div>
        </div>

<div className="d-flex gap-3 flex-wrap">
          <div className="progress-box bg-light-danger w-100">
            <div className="progress-content">
              <div>
                <div className="left d-flex align-items-center">
                  
                  
                  <IconTrash size={20} className="me-1 ms-1" />
                  Deleting data (85% remain)
                </div>
                <div className="right">
                  <span class="badge text-bg-danger">1 Min left</span>
                </div>
              </div>
            </div>
            <div className="progress w-100 h-5" role="progressbar" aria-valuenow="15" aria-valuemax="100">
              <div className="progress-bar bg-danger h-5" style="width: 15%">15%</div>
            </div>
          </div>
        </div>

<div className="d-flex gap-3 flex-wrap"> <div className="progress-box bg-light-primary w-100"> <div className="progress-content"> <div> <div className="left d-flex align-items-center"> <span className="spinner-border spinner-border-sm me-2 ms-2" role="status" aria-hidden="true"></span> Loading data... </div> <div className="right"> </div> </div> </div> <div className="progress w-100 h-5" role="progressbar" aria-valuenow="100" aria-valuemax="100"> <div className="progress-bar bg-primary h-5" style="width: 100%">100%</div> </div> </div> </div> <div className="d-flex gap-3 flex-wrap"> <div className="progress-box bg-light-secondary w-100"> <div className="progress-content"> <div> <div className="left d-flex align-items-center"> 75% Processing </div> <div className="right"> </div> </div> </div> <div className="progress w-100 h-5" role="progressbar" aria-valuenow="75" aria-valuemax="100"> <div className="progress-bar bg-secondary h-5" style="width: 75%">75%</div> </div> </div> </div> <div className="d-flex gap-3 flex-wrap"> <div className="progress-box bg-light-success w-100"> <div className="progress-content"> <div> <div className="left d-flex align-items-center"> 52% Updating.. </div> <div className="right"> <span class="badge text-bg-success">1 Min</span> </div> </div> </div> <div className="progress w-100 h-5" role="progressbar" aria-valuenow="52" aria-valuemax="100"> <div className="progress-bar bg-success h-5" style="width: 52%">52%</div> </div> </div> </div> <div className="d-flex gap-3 flex-wrap"> <div className="progress-box bg-light-danger w-100"> <div className="progress-content"> <div> <div className="left d-flex align-items-center"> <IconTrash size={20} className="me-1 ms-1" /> Deleting data (85% remain) </div> <div className="right"> <span class="badge text-bg-danger">1 Min left</span> </div> </div> </div> <div className="progress w-100 h-5" role="progressbar" aria-valuenow="15" aria-valuemax="100"> <div className="progress-bar bg-danger h-5" style="width: 15%">15%</div> </div> </div> </div>