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