# Progress | Soft UI Dashboard Bootstrap @ Creative Tim
A free Laravel Dashboard featuring dozens of UI components & basic Laravel CRUDs.
Author: Creative Tim
Keywords: creative tim, updivision, html dashboard, laravel, html css dashboard laravel, soft ui dashboard laravel, laravel soft ui dashboard, soft ui admin, laravel dashboard, laravel admin, web dashboard, bootstrap 5 dashboard laravel, bootstrap 5, css3 dashboard, bootstrap 5 admin laravel, soft ui dashboard bootstrap 5 laravel, frontend, responsive bootstrap 5 dashboard, soft ui dashboard, soft ui laravel bootstrap 5 dashboard

# Bootstrap Progress

Bootstrap progress components can be used to show a user how far along he/she is in a process. These Bootstrap progress bars are built with two HTML elements, some CSS to set the width, and a few attributes. Now keep reading some examples to see how Bootstrap Progress bars work.

## Example

### Simple Progress

60%
60%
60%
60%
60%
60%
Copy

    <div class="progress-wrapper">
      <div class="progress-info">
        <div class="progress-percentage">
          <span class="text-sm font-weight-normal">60%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
      </div>
    </div>

    <div class="progress-wrapper">
      <div class="progress-info">
        <div class="progress-percentage">
          <span class="text-sm font-weight-normal">60%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
      </div>
    </div>

    <div class="progress-wrapper">
      <div class="progress-info">
        <div class="progress-percentage">
          <span class="text-sm font-weight-normal">60%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar bg-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
      </div>
    </div>

    <div class="progress-wrapper">
      <div class="progress-info">
        <div class="progress-percentage">
          <span class="text-sm font-weight-normal">60%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
      </div>
    </div>

    <div class="progress-wrapper">
      <div class="progress-info">
        <div class="progress-percentage">
          <span class="text-sm font-weight-normal">60%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
      </div>
    </div>

    <div class="progress-wrapper">
      <div class="progress-info">
        <div class="progress-percentage">
          <span class="text-sm font-weight-normal">60%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
      </div>
    </div>

### Gradient Progress

60%
60%
60%
60%
60%
60%
Copy

    <div class="progress-wrapper">
      <div class="progress-info">
        <div class="progress-percentage">
          <span class="text-sm font-weight-normal">60%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar bg-gradient-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
      </div>
    </div>

    <div class="progress-wrapper">
      <div class="progress-info">
        <div class="progress-percentage">
          <span class="text-sm font-weight-normal">60%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar bg-gradient-secondary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
      </div>
    </div>

    <div class="progress-wrapper">
      <div class="progress-info">
        <div class="progress-percentage">
          <span class="text-sm font-weight-normal">60%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar bg-gradient-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
      </div>
    </div>

    <div class="progress-wrapper">
      <div class="progress-info">
        <div class="progress-percentage">
          <span class="text-sm font-weight-normal">60%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar bg-gradient-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
      </div>
    </div>

    <div class="progress-wrapper">
      <div class="progress-info">
        <div class="progress-percentage">
          <span class="text-sm font-weight-normal">60%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar bg-gradient-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
      </div>
    </div>

    <div class="progress-wrapper">
      <div class="progress-info">
        <div class="progress-percentage">
          <span class="text-sm font-weight-normal">60%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar bg-gradient-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
      </div>
    </div>