→ 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

3.3k

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

1 year ago

1.2k

v.5.3
Default progress bar designs by boostrap css

Author:
Omar Khaled

1 year ago

1.9k

v.5.3
Progress bars made with bootstrap 5.3

Author:
Anonymous

11 months ago

2k

v.5.3
Progress bars
Progress bar variations

Author:
Reza Farhadi

1 year ago

799

v.5.3
Marquee Animation
On hover stop effect

Author:
Anonymous

1 year ago

10k

v.5.3
Responsive Bento Grid Layout
Bento grid layout using Bootstrap 5 and custom CSS

Author:
Anonymous

1 year ago

1.3k

v.5.3
Modern 404 Error Page with Lottie Animation and Bootstrap Layout
This elegant and responsive 404 error page is built with Bootstrap 5 and features a smooth, animated Lottie illustration to enhance user experience. The layout is fully responsive, with the animation and error message side-by-side on larger screens and stacked on smaller devices. It includes a clear "Back to homepage" button, making it user-friendly and ideal for maintaining engagement even when users encounter a broken link or missing page.

Author:
Talha Abdullah Bangyal

4 months ago

2.5k

v.5.3
Form Wave
Form Wave

Author:
Rami AlAjo

7 months ago

1.1k

v.4.6
Countdown timer
Countdown timer with js

Author:
Moana silva

1 year ago

10.6k

v.5.3
Expanding Search Bar - Bootstrap 5
Expand search bar on click

Author:
Andreas Müller

1 year ago

4.8k

v.5.3
Typewriter Effect

Author:
Anonymous

1 year ago

1.8k

v.4.6
Outlined Buttons with Animated Hover

Author:
Prajwal Hallale

1 year ago

1.6k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent