Progress Bars

Progress Bar Style 1

Lorem Ipsum

94%

 
                        
<div class="progress-bar-style-1">
    <div class="progress-bar-title">
        <h4>Lorem Ipsum</h4>
        <h4>94%</h4>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 94%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>

Progress Bar Style 2

Lorem Ipsum

94%

 
                        
<div class="progress-bar-style-2">
    <div class="progress-bar-title">
        <h4>Lorem Ipsum</h4>
        <h4>94%</h4>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 94%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
</div>

Progress Bar Style 3

Lorem Ipsum

94%

                        
<div class="progress-bar-style-3">
    <div class="progress-bar-title">
        <h4>Lorem Ipsum</h4>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 94%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
            <h4>94%</h4>
        </div>
    </div>
</div>

Progress Bar Style 4

Lorem Ipsum 94%
                        
<div class="progress-bar-style-4">
    <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 94%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
            <div class="progress-bar-title">
                <span>Lorem Ipsum</span>
                <span>94%</span>
            </div>
        </div>
    </div>
</div>