Progress Bar Style 1

Lorem Dolor

90%

                            
<section class="progress-bars dt-section">
    <div class="container">
        <div class="progress-bars-block">
            <div class="progress1">
                <p>Lorem Dolor</p>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                    <p class="rangevalue"><span class="rangevalue1">90</span>%</p>
                </div>
            </div>
        </div>
    </div>    
</section>

Progress Bar Style 2

Loremipsum

90%

                            
<section class="progress-bars dt-section">
    <div class="container">
        <div class="progress-bars-block">
            <div class="progress2">
                <p>Loremipsum</p>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
                        <p class="rangevalue"><span class="rangevalue1">90</span>%</p>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</section>

Progress Bar Style 3

75%

Lorem Dolor

                            
<section class="progress-bars dt-section">
    <div class="container">
        <div class="progress-bars-block">
            <div class="progress3">
                <div class="contains">
                    <div class="bars">
                        <div class="our-value-progress" data-value='75'>
                            <span class="progress-left">
                                <span class="our-value-progress-bar border-color"></span>
                            </span>
                            <span class="progress-right">
                                <span class="our-value-progress-bar border-color"></span>
                            </span>
                            <div class="our-value-progress-value w-100 h-100  rounded-circle d-flex align-items-center justify-content-center">
                                <div class="h2 value mb-0 font-weight-bold"><span data-purecounter-start="0" data-purecounter-end="75" class="purecounter">75</span><span>%</span></div>
                            </div>
                        </div>
                        <p>Lorem Dolor</p>
                    </div>
                </div>  
            </div>
        </div>
    </div>    
</section>

Progress Bar Style 4

Lorem Dolor

90%

                            
<section class="progress-bars dt-section">
    <div class="container">
        <div class="progress-bars-block">
            <div class="progress4">
                <p>Lorem Dolor</p>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                    <p class="rangevalue"><span class="rangevalue1">90</span>%</p>
                </div>
            </div>
        </div>
    </div>    
</section>