Main Menu
Boost your work

Upgrade to premium here

Upgrade Now
Kleon Admin Dashboard
Made with by WPThemeBooster
Theme Customizer
Theme Color Mode
Navigation Layout
Vertical Navigation Styles
Header Position
Topbar Style

Progressbar

Lorem ipsum dolor sit amet

Bars with outside value

Add .progress-classic as parent div class and add .overflow-visible to .progress & .progress-bar and also add .progress-value to span in .progress-bar to show progress value outside of bar.

Web Design
60%
Graphics Design
70%
Data Security
65%
Art & Craft
68%
Mathamatics
80%

<!-- Bars with outside value -->
<div class="progress-classic">
    <div class="progress-label fs-14 fw-semibold mb-1">Web Design</div>
    <div class="progress overflow-visible mb-4" style="height: 4px;">
        <div class="progress-bar bg-red overflow-visible" role="progressbar" aria-label="Red example" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"><span class="progress-value fw-semibold text-red">60%</span></div>
    </div>
</div>

<div class="progress-classic">
    <div class="progress-label fs-14 fw-semibold mb-1">Graphics Design</div>
    <div class="progress overflow-visible mb-4" style="height: 4px;">
        <div class="progress-bar bg-purple overflow-visible" role="progressbar" aria-label="Purple example" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"><span class="progress-value fw-semibold text-primary">70%</span></div>
    </div>
</div>

<div class="progress-classic">
    <div class="progress-label fs-14 fw-semibold mb-1">Data Security</div>
    <div class="progress overflow-visible mb-4" style="height: 4px;">
        <div class="progress-bar bg-green overflow-visible" role="progressbar" aria-label="Green example" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"><span class="progress-value fw-semibold text-green">65%</span></div>
    </div>
</div>

<div class="progress-classic">
    <div class="progress-label fs-14 fw-semibold mb-1">Art & Craft</div>
    <div class="progress overflow-visible mb-4" style="height: 4px;">
        <div class="progress-bar bg-orange overflow-visible" role="progressbar" aria-label="Orange example" style="width: 68%" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"><span class="progress-value fw-semibold text-warning">68%</span></div>
    </div>
</div>

<div class="progress-classic">
    <div class="progress-label fs-14 fw-semibold mb-1">Mathamatics</div>
    <div class="progress overflow-visible" style="height: 4px;">
        <div class="progress-bar bg-dark overflow-visible" role="progressbar" aria-label="Dark example" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"><span class="progress-value fw-semibold text-dark">80%</span></div>
    </div>
</div>

Bars with Ratting

Add .progress-ratting as parent div class.

5
60
4
70
3
65
2
68
1
80 

<!-- Bars with Ratting -->
<div class="progress-ratting d-flex align-items-center mb-4">
    <div class="progress-label fw-semibold text-nowrap">5 <i class="bi bi-star-fill"></i></div>
    <div class="progress w-100 mx-3" style="height: 4px;">
        <div class="progress-bar bg-red" role="progressbar" aria-label="Red example" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <span class="progress-value text-gray-800 fw-semibold">60</span>
</div>

<div class="progress-ratting d-flex align-items-center mb-4">
    <div class="progress-label fw-semibold text-nowrap">4 <i class="bi bi-star-fill"></i></div>
    <div class="progress w-100 mx-3" style="height: 4px;">
        <div class="progress-bar bg-purple" role="progressbar" aria-label="Red example" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <span class="progress-value text-gray-800 fw-semibold">70</span>
</div>

<div class="progress-ratting d-flex align-items-center mb-4">
    <div class="progress-label fw-semibold text-nowrap">3 <i class="bi bi-star-fill"></i></div>
    <div class="progress w-100 mx-3" style="height: 4px;">
        <div class="progress-bar bg-green" role="progressbar" aria-label="Red example" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <span class="progress-value text-gray-800 fw-semibold">65%</span>
</div>

<div class="progress-ratting d-flex align-items-center mb-4">
    <div class="progress-label fw-semibold text-nowrap">2 <i class="bi bi-star-fill"></i></div>
    <div class="progress w-100 mx-3" style="height: 4px;">
        <div class="progress-bar bg-orange" role="progressbar" aria-label="Red example" style="width: 68%" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <span class="progress-value text-gray-800 fw-semibold">68</span>
</div>

<div class="progress-ratting d-flex align-items-center">
    <div class="progress-label fw-semibold text-nowrap">1 <i class="bi bi-star-fill"></i></div>
    <div class="progress w-100 mx-3" style="height: 4px;">
        <div class="progress-bar bg-dark" role="progressbar" aria-label="Red example" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <span class="progress-value text-gray-800 fw-semibold">80</span>
</div>

Bars with Ratting

Add .progress-ratting-classic as parent div class.

4.4

Course Ratting

60%
70%
65%
68%
80% 

<!-- Bars with Ratting -->
<div class="row align-items-center">
    <div class="col-lg-3 d-flex justify-content-end">
        <div class="ratting_box text-center">
            <h1 class="ratting_average text-primary mb-2">4.4</h1>
            <div class="ratting_icons text-orange"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i></div>
            <p class="ratting_sub_title text-dark fw-semibold mb-0">Course Ratting</p>
        </div>
    </div>

    <div class="col-lg-9">
        <div class="progress-ratting-classic d-flex align-items-center mb-2">
            <div class="progress w-100" style="height: 8px;">
                <div class="progress-bar bg-gray-300" role="progressbar" aria-label="Red example" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="progress-label fw-semibold text-nowrap text-orange mx-3"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i></div>
            <span class="progress-value text-primary fw-semibold">60%</span>
        </div>
        
        <div class="progress-ratting-classic d-flex align-items-center mb-2">
            <div class="progress w-100" style="height: 8px;">
                <div class="progress-bar bg-gray-300" role="progressbar" aria-label="Red example" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="progress-label fw-semibold text-nowrap text-orange mx-3"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star"></i></div>
            <span class="progress-value text-primary fw-semibold">70%</span>
        </div>

        <div class="progress-ratting-classic d-flex align-items-center mb-2">
            <div class="progress w-100" style="height: 8px;">
                <div class="progress-bar bg-gray-300" role="progressbar" aria-label="Red example" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="progress-label fw-semibold text-nowrap text-orange mx-3"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star"></i><i class="bi bi-star"></i></div>
            <span class="progress-value text-primary fw-semibold">65%</span>
        </div>

        <div class="progress-ratting-classic d-flex align-items-center mb-2">
            <div class="progress w-100" style="height: 8px;">
                <div class="progress-bar bg-gray-300" role="progressbar" aria-label="Red example" style="width: 68%" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="progress-label fw-semibold text-nowrap text-orange mx-3"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star"></i><i class="bi bi-star"></i><i class="bi bi-star"></i></div>
            <span class="progress-value text-primary fw-semibold">68%</span>
        </div>

        <div class="progress-ratting-classic d-flex align-items-center">
            <div class="progress w-100" style="height: 8px;">
                <div class="progress-bar bg-gray-300" role="progressbar" aria-label="Red example" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="progress-label fw-semibold text-nowrap text-orange mx-3"><i class="bi bi-star-fill"></i><i class="bi bi-star"></i><i class="bi bi-star"></i><i class="bi bi-star"></i><i class="bi bi-star"></i></div>
            <span class="progress-value text-primary fw-semibold">80%</span>
        </div>
    </div>
</div>