컴포넌트 - 프로그래스바

    <div class="container py-5">

        <!-- PROGRESS BAR -->

        <div class="progress">
            <div class="progress-bar" style="width: 50%;"></div>
        </div>

        <br>

        <div class="progress">
            <div class="progress-bar w-100"></div>
        </div>

        <br>

        <!-- PROGRESS BAR COLORS-->

        <div class="progress">
            <div class="progress-bar bg-danger" style="width: 70%;"></div>
        </div>

        <br>

        <div class="progress">
            <div class="progress-bar bg-info" style="width: 70%;">70%</div>
        </div>

        <!-- PROGRESS BAR HEIGHTS-->

        <br>

        <div class="progress" style="height: 20px;">
            <div class="progress-bar bg-danger" style="width: 70%;"></div>
        </div>


        <!-- MULTIPLE PROGRESS BAR -->

        <br>

        <div class="progress">
            <div class="progress-bar bg-primary" style="width: 15%;">15%</div>
            <div class="progress-bar bg-success" style="width: 45%;">45%</div>
            <div class="progress-bar bg-warning" style="width: 25%;">25%</div>
        </div>


        <!-- STRIPED PROGRESS BAR -->

        <br>

        <div class="progress">
            <div class="progress-bar progress-bar-striped" style="width: 50%;"></div>
        </div>

        <br>

        <div class="progress">
            <div class="progress-bar progress-bar-striped bg-warning" style="width: 50%;"></div>
        </div>

        <br>
        <div class="progress">
            <div class="progress-bar progress-bar-striped bg-danger" style="width: 50%;"></div>
        </div>

        <br>
        <div class="progress">
            <div class="progress-bar progress-bar-striped bg-info" style="width: 50%;"></div>
        </div>

        <br>



        <!-- ANIMATED PROGRESS BAR -->

        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 70%;"></div>
        </div>

        <br>

        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%;"></div>
        </div>

        <br>

        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" style="width: 70%;"></div>
        </div>

        <br>

        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" style="width: 40%;" aria-volumenow="40" aria-volumemin="0" aria-valuemix="100"></div>
        </div>



    </div>