## Progress Bars

- Home
- Shortcodes
- Progress Bars

## Progress Bars style 1

60%
0%
60%
0%

        <div class="row">
        <div class="col-md-4 mb-3">

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

        </div>
        <div class="col-md-4 mb-3">

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

        </div>
        <div class="col-md-4">

        <div class="progress">
        <div style="min-width: 2em;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar" class="progress-bar bg-primary">
        0%
        </div>
        </div>

        </div>
        </div>

         <div class="row">
        <div class="col-md-4">

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

        </div>
        <div class="col-md-4">

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

        </div>
        <div class="col-md-4">

        <div class="progress">
        <div style="min-width: 2em;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar" class="progress-bar bg-primary">
        0%
        </div>
        </div>

        </div>
        </div>

## Progress Bars style 2

        <div class="row">
        <div class="col-12">
        <div class="progress ">
        <div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar bg-success">
        </div>
        </div>
        <div class="progress ">
        <div style="width: 20%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" role="progressbar" class="progress-bar bg-info">
        </div>
        </div>
        <div class="progress ">
        <div style="width: 60%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar bg-warning">
        </div>
        </div>
        <div class="progress">
        <div style="width: 80%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="progress-bar progress-bar-danger">
        </div>
        </div>
        </div>
        </div>

## Progress Bars style 3

#### Striped

#### Animated

        <div class="row">
        <div class="col-md-6">

        <h4>Striped</h4>

        <div class="progress">
        <div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar bg-primary progress-bar-striped">
        </div>
        </div>
        </div>
        <div class="col-md-6">

        <h4>Animated</h4>

        <div class="progress">
        <div style="width: 45%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="45" role="progressbar" class="progress-bar bg-primary progress-bar-striped active">
        </div>
        </div>
        </div>
        </div>