Style 1

                        
<section id="dt-content" class="sec-pt-lg">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6">
                <h2>Style 1</h2>
                <div class="progress style1">
                    <div class="progress-bar" role="progressbar" style="width: 55%" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>
    </div>
</section>

Style 2

                        
<section id="dt-content" class="sec-pt-lg">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6">
                <h2>Style 2</h2>
                <div class="progress style1">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%"></div>
                </div>
            </div>
        </div>
    </div>
</section>

Style 3

                        
<section id="dt-content" class="sec-pt-lg">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6">
                <h2>Style 3</h2>
                <div class="progress style2">
                    <div class="progress-bar" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>
    </div>
</section>

Style 4

                        
<section id="dt-content" class="sec-pt-lg">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6">
                <h2>Style 4</h2>
                <div class="progress style2">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 65%"></div>
                </div>

            </div>
        </div>
    </div>
</section>

Style 5

                        
<section id="dt-content" class="sec-pt-lg">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6">
                <h2>Style 5</h2>
                <div class="progress style3">
                    <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                </div>

            </div>
        </div>
    </div>
</section>

Style 6

                        
<section id="dt-content" class="sec-pt-lg">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6">
                <h2>Style 6</h2>
                <div class="progress style3">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
                </div>

            </div>
        </div>
    </div>
</section>