→ Reza Farhadi
→ Animated Skills Progress Chart

Animated Skills Progress Chart

This bootstrap css example is contributed by Reza Farhadi, on 13-Sep-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Progress Bar

Author Reza Farhadi

815

v.5.3

Fork Fullscreen

<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="skills-container">
                <h2 class="text-center text-white mb-5">My Skills</h2>
                <div class="row justify-content-center">
                    <div class="col-sm-6 col-md-4 mb-4">
                        <div class="skill-item mx-auto animated" data-skill="HTML" data-percent="90">
                            <svg class="skill-circle">
                                <circle class="bg" cx="70" cy="70" r="70"></circle>
                                <circle class="progress" cx="70" cy="70" r="70"></circle>
                            </svg>
                            <div class="skill-text">
                                <div class="skill-percent">0%</div>
                                <div class="skill-name">HTML</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-4 mb-4">
                        <div class="skill-item mx-auto animated" data-skill="CSS" data-percent="85">
                            <svg class="skill-circle">
                                <circle class="bg" cx="70" cy="70" r="70"></circle>
                                <circle class="progress" cx="70" cy="70" r="70"></circle>
                            </svg>
                            <div class="skill-text">
                                <div class="skill-percent">0%</div>
                                <div class="skill-name">CSS</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-4 mb-4">
                        <div class="skill-item mx-auto animated" data-skill="JavaScript" data-percent="80">
                            <svg class="skill-circle">
                                <circle class="bg" cx="70" cy="70" r="70"></circle>
                                <circle class="progress" cx="70" cy="70" r="70"></circle>
                            </svg>
                            <div class="skill-text">
                                <div class="skill-percent">0%</div>
                                <div class="skill-name">JavaScript</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Progress bars

Author:
Tane Mahuta

6 months ago

329

v.5.3
Progress bars
Progress bar variations

Author:
Reza Farhadi

5 months ago

268

v.5.3
Progress bars made with bootstrap 5.3

Author:
Anonymous

3 months ago

378

v.5.3
Default progress bar designs by boostrap css

Author:
Omar Khaled

5 months ago

1.1k

v.5.3
Modern Service Cards Component With Icons

Author:
Alaric Sloane

2 months ago

216

v.5.3
Card w/ gradient background
A modern and visually appealing card component with a gradient background and hover effect.

Author:
Prajwal Hallale

10 months ago

583

v.5.3
About Our Company
Display your company data

Author:
Tane Mahuta

6 months ago

374

v.5.3
404 error page template

Author:
Ross Wille

6 months ago

965

v.5.3
Contact US form

Author:
Anonymous

9 months ago

3.7k

v.4.6
bootstrap quiz template (Interactive)
Interactive MCQ Quiz show results at the end

Author:
Arturo

1 month ago

346

v.5.3
HTML, CSS, and JavaScript for Multi-layer Dropdown Header
HTML: Added dropdown-submenu class to handle nested dropdowns. CSS: Dropdown Submenu: Positioned to the right of the parent dropdown. JavaScript: Event Listeners: Added to show and hide nested dropdowns on mouse enter and leave. How to Use: Create an header.html file and paste the updated code into it. Include Bootstrap and Font Awesome if needed for styling and icons.

Author:
zobaidul kaziex

4 months ago

268

v.4.6
Password Reset Form
Multi-step password reset form with email verification, code validation, and password strength meter built with Bootstrap 5.3.

Author:
Isaac Winslow

2 months ago

841

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent