Progress Bars

Progress Bar Style 1

75%
                                
<section class="progress-bars element-page dt-section">
    <div class="container">
        <div class="progress-bar-style-1">
            <h2 class="heading-title">Progress Bar Style 1</h2>
            <div class="progress">
                <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                    <h5>75%</h5>
                </div>
            </div>
        </div>
    </div>
</section>

Progress Bar Style 2

75%
                                
<section class="progress-bars element-page dt-section">
    <div class="container">
        <div class="progress-bar-style-2">
            <h2 class="heading-title">Progress Bar Style 2</h2>
            <div class="progress">
                <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                </div>
                <h5>75%</h5>
            </div>
        </div>
    </div>
</section>

Progress Bar Style 3

75%
                                
<section class="progress-bars element-page dt-section">
    <div class="container">
        <div class="progress-bar-style-3">
            <h2 class="heading-title">Progress Bar Style 3</h2>
            <div class="progress">
                <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 75%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                    <h5>75%</h5>
                </div>
            </div>
        </div>
    </div>
</section>

Progress Bar Style 4

Lorem Ipsum
72%
                                
<section class="progress-bars element-page dt-section">
    <div class="container">
        <div class="progress-bar-style-4">
            <h2 class="heading-title">Progress Bar Style 4</h2>
            <div class="progress-details"><h5>Lorem Ipsum</h5><h5>72%</h5></div>
            <div class="progress">
                <div class="progress-bar" role="progressbar" style="width: 72%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
    </div>
</section>