<div class="d-flex gap-3 flex-wrap">
    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0"
         class="progress w-100" role="progressbar">
        <div class="progress-bar bg-gradient-primary rounded-end"
             style="width: 12.5%"></div>
    </div>

    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"
         class="progress w-100" role="progressbar">
        <div class="progress-bar bg-gradient-secondary rounded-end"
             style="width: 25%"></div>
    </div>

    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="37.5"
         class="progress w-100" role="progressbar">
        <div class="progress-bar bg-gradient-success rounded-end"
             style="width: 37.5%"></div>
    </div>

    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"
         class="progress w-100" role="progressbar">
        <div class="progress-bar bg-gradient-danger rounded-end"
             style="width: 50%"></div>
    </div>

    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="62.5"
         class="progress w-100" role="progressbar">
        <div class="progress-bar bg-gradient-warning rounded-end"
             style="width: 62.5%"></div>
    </div>

    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="75"
         class="progress w-100" role="progressbar">
        <div class="progress-bar bg-gradient-info rounded-end"
             style="width: 75%"></div>
    </div>

    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="82.5"
         class="progress w-100" role="progressbar">
        <div class="progress-bar bg-gradient-light rounded-end"
             style="width: 82.5%"></div>
    </div>

    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="95"
         class="progress w-100" role="progressbar">
        <div class="progress-bar bg-gradient-dark rounded-end"
             style="width: 95%"></div>
    </div>
</div>
                                
                              

                                
 <div class="d-flex gap-3 flex-wrap">
    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0"
         class="progress w-100" role="progressbar">
        <div class="progress-bar bg-primary progress-bar-striped progress-bar-animated rounded-end"
             style="width: 12.5%"> 12.5% </div>
    </div>

    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25"
         class="progress w-100" role="progressbar">
        <div class="progress-bar bg-secondary progress-bar-striped progress-bar-animated rounded-end"
             style="width: 25%"> 25% </div>
    </div>

    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="37.5"
         class="progress w-100" role="progressbar">
        <div class="progress-bar bg-success progress-bar-striped progress-bar-animated rounded-end"
             style="width: 37.5%"> 37.5% </div>
    </div>

    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"
         class="progress w-100" role="progressbar">
        <div class="progress-bar bg-danger progress-bar-striped progress-bar-animated rounded-end"
             style="width: 50%"> 50% </div>
    </div>

    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="62.5"
         class="progress w-100" role="progressbar">
        <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated rounded-end"
             style="width: 62.5%"> 62.5% </div>
    </div>

    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="75"
         class="progress w-100" role="progressbar">
        <div class="progress-bar bg-info progress-bar-striped progress-bar-animated rounded-end"
             style="width: 75%"> 75% </div>
    </div>

    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="82.5"
         class="progress w-100" role="progressbar">
        <div class="progress-bar bg-light progress-bar-striped progress-bar-animated rounded-end"
             style="width: 82.5%"> 82.5% </div>
    </div>

    <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="95"
         class="progress w-100" role="progressbar">
        <div class="progress-bar bg-dark progress-bar-striped progress-bar-animated rounded-end"
             style="width: 95%"> 95% </div>
    </div>
</div>
                                
                              

                                
  <div class="row gap-3">
    <div class="progress h-5">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="20"
             class="progress-bar bg-primary h-5 rounded-end"
             role="progressbar" style="width: 20%;"></div>
    </div>

    <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"
             class="progress-bar bg-secondary rounded-end"
             role="progressbar" style="width: 30%;">This is normal size</div>
    </div>

    <div class="progress">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="40"
             class="progress-bar bg-danger rounded-end"
             role="progressbar" style="width: 40%;">This is normal size</div>
    </div>

    <div class="progress h-15">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"
             class="progress-bar bg-success h-15 rounded-end"
             role="progressbar" style="width: 50%;"> height 15px</div>
    </div>

    <div class="progress h-15">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50"
             class="progress-bar bg-info h-15 rounded-end"
             role="progressbar" style="width: 60%;"> height 15px</div>
    </div>

    <div class="progress h-20">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="60"
             class="progress-bar bg-danger h-20 rounded-end"
             role="progressbar" style="width: 70%;"> height 20px</div>
    </div>

    <div class="progress h-25">
        <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="70"
             class="progress-bar bg-warning h-25 rounded-end"
             role="progressbar" style="width: 80%;"> height 25px</div>
    </div>
</div>