Material Admin Extended Dark

## Progress Bar

Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.

Progress Bar is a Bootstrap component and you can find it's complete documentation with more examples at: http://getbootstrap.com/javascript/#progress

#### Basic example

    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
          <span class="sr-only">60% Complete</span>
        </div>
    </div>

#### Contextual alternatives

    <!-- Success -->
    <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"></div>
    </div>

    <!-- Info -->
    <div class="progress">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"></div>
    </div>

    <!-- Warning -->
    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"></div>
    </div>

    <!-- Danger -->
    <div class="progress">
        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"></div>
    </div>

#### Striped Progress bars

Uses a gradient to create a striped effect with an additional modifier class `.progress-bar-striped`. Gradient striped is not available in IE9 and below.

    <div class="progress">
        <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
        <span class="sr-only">40% Complete (success)</span>
    </div>

#### Stacked Progress bar

Place multiple bars into the same `.progress` to stack them.

    <div class="progress">
      <div class="progress-bar progress-bar-success" style="width: 35%">
        <span class="sr-only">35% Complete (success)</span>
      </div>
      <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
        <span class="sr-only">20% Complete (warning)</span>
      </div>
      <div class="progress-bar progress-bar-danger" style="width: 10%">
        <span class="sr-only">10% Complete (danger)</span>
      </div>
    </div>

Source files:

- LESS: `/less/inc/bootstrap-overrides/progress-bar.less`
- HTML: `/components.less`