@themesberg/pixel-lite-bootstrap-ui-kit/src/partials/components/_progress-bars.html

Open-source Bootstrap 5 UI Kit

<!-- Section -->
<div class="section section-md">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <div class="progress-label">
                            <span class="text-primary">Primary Color</span>
                        </div>
                        <div class="progress-percentage">
                            <span>50%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 50%;" aria-valuenow="50"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <div class="progress-label">
                            <span class="text-secondary">Secondary Color</span>
                        </div>
                        <div class="progress-percentage">
                            <span>60%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-secondary" role="progressbar" style="width: 60%;" aria-valuenow="60"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <div class="progress-label">
                            <span class="text-tertiary">Tertiary Color</span>
                        </div>
                        <div class="progress-percentage">
                            <span>60%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-tertiary" role="progressbar" style="width: 60%;" aria-valuenow="60"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <div class="progress-label">
                            <span class="text-dark">Dark Color</span>
                        </div>
                        <div class="progress-percentage">
                            <span>60%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-dark" role="progressbar" style="width: 60%;" aria-valuenow="60"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <div class="progress-label">
                            <span class="text-success">Success Bar</span>
                        </div>
                        <div class="progress-percentage">
                            <span>60%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 60%;" aria-valuenow="60"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <div class="progress-label">
                            <span class="text-info">Info Bar</span>
                        </div>
                        <div class="progress-percentage">
                            <span>60%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-info" role="progressbar" style="width: 60%;" aria-valuenow="60"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="progress-wrapper">
                    <div class="progress-info">
                        <div class="progress-label">
                            <span class="text-danger">Danger Bar</span>
                        </div>
                        <div class="progress-percentage">
                            <span>60%</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-danger" role="progressbar" style="width: 60%;" aria-valuenow="60"
                            aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End of Section -->