<div class="progress">
        <div class="progress-bar bg-success" role="progressbar" aria-valuenow="40"
        aria-valuemin="0" aria-valuemax="100" style="width:40%">
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-info" role="progressbar" aria-valuenow="50"
        aria-valuemin="0" aria-valuemax="100" style="width:50%">
        </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 class="progress">
        <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="70"
        aria-valuemin="0" aria-valuemax="100" style="width:70%">
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-success progress-bar-striped" role="progressbar"
        aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-info progress-bar-striped" role="progressbar"
        aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-warning progress-bar-striped" role="progressbar"
        aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-danger progress-bar-striped" role="progressbar"
        aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
        </div>
    </div>