Section heading

Progress Bar Style 1

 
90%
        
            <section class="progress-bars dt-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="progress-bar-style-1">
                    <h2>Progress Bar Style 1</h2>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width: 90%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                        </div>
                        <h6>90%</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Section heading

Progress Bar Style 2

75%
        
            <section class="progress-bars dt-section">
            <div class="container">
                <div class="row">
                    <div class="progress-bar-style-2">
                        <h2>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">
                                <h6>75%</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

Section heading

Progress Bar Style 3

 
90%
        
            <section class="progress-bars dt-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="progress-bar-style-3">
                    <h2>Progress Bar Style 3</h2>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                        </div>
                        <h6>75%</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Section heading

Progress Bar Style 4

90%
        
            <section class="progress-bars dt-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="progress-bar-style-4">
                            <h2>Progress Bar Style 4</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">
                                    <h6>75%</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

Section heading

Progress Bar Style 5

35%
 
 
Branding
        
            <section class="progress-bars dt-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="progress-bar-style-5">
                            <h2>Progress Bar Style 5</h2>
                            <div class="item">
                                <div class="item-content">
                                    <div class="progress-circle p10">
                                        <span>90%</span>
                                        <div class="left-half-clipper">
                                        <div class="first50-bar"></div>
                                        <div class="value-bar"></div>
                                        </div>
                                    </div>
                                    <h5>Branding</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>