How to make Animated Skill bar using HTML CSS & Jquery | Animated Progress Bar

Hey friends, today in this blog you’ll learn How to make Animated Skill bar using HTML CSS & Jquery | Animated Progress Bar . We’ll use HTML CSS and Jquery to create this Animated Progress Bar . Earlier I’ve shared a blog on How to Make Profile Card using HTML and CSS.

If you want to see this Animated Progress Bar and how it is created then you can watch a full video tutorial on this How to make Animated Skill bar using HTML CSS & Jquery .

Video Tutorial of ” Animated Skill bar using HTML CSS & Jquery “

You might like this:

• Responsive Ecommerce Website
• Responsive Image Slider
• How To Create Responsive Login Form Using Html Css Only
• How to Create Resume CV Website Using HTML CSS Bootstrap4
• How create an Online Store Website Using Htm Css JS | Multi Page Website

Animated Progress Bar [Source Codes]

To create this Animated Progress Bar . First, you need to create Two files, HTML File , and CSS File . After creating these files Just copy the given source code and paste into your text editor and edit it according to your requirement. You can also download the source code files of this Animated Skill bar using HTML CSS & Jquery from the given download button.

# HTML CODE

First, create a Html file (index.html) and paste the given codes in your CSS file.

    <div class="skills">

        <div class="section-title text-center">
            <h1>Skills Bar</h1>
        </div>

        <div class="skill">
            <div class="skill-name">HTML</div>
            <div class="skill-bar">
                <div class="skill-per" per="45"></div>
            </div>
        </div>

        <div class="skill">
            <div class="skill-name">CSS</div>
            <div class="skill-bar">
                <div class="skill-per" per="70"></div>
            </div>
        </div>


        <div class="skill">
            <div class="skill-name">Javascript</div>
            <div class="skill-bar">
                <div class="skill-per" per="90"></div>
            </div>
        </div>

        <div class="skill">
            <div class="skill-name">Bootstrap</div>
            <div class="skill-bar">
                <div class="skill-per" per="65"></div>
            </div>
        </div>


    </div>
    <script>
        $('.skill-per').each(function () {
            var $this = $(this);
            var per = $this.attr('per');
            $this.css("width", per + '%');
            $({ animatedValue: 0 }).animate({ animatedValue: per }, {
                duration: 1000,
                step: function () {
                    $this.attr('per', Math.floor(this.animatedValue) + '%');

                },
                complete: function () {
                    $this.attr('per', Math.floor(this.animatedValue) + '%');

                }

            });
        });
    </script>

# CSS CODE

Second, create a CSS file (style.css) and paste the given codes in your CSS file.

body{
    margin: 0;
    padding: 0;
    font-family: 'open sans',sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f1f1;
}
.skills{
    width: 100%;
    max-width: 600px;
    padding: 0 20px;
}
.section-title {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 40px;
}
.section-title h1{
    display: inline-block;
    font-size: 35px;
    text-transform: uppercase;
    font-weight: 700;
    color: #000000;
    margin: 0 0 5px;
    position: relative;
}
.section-title h1:before{
    content: '';
    left: 0;
    position: absolute;
    height: 2px;
    right: 32%;
    background-color: #50c5fc;
    bottom: 0px;
}
.skills .section-title h1:before{
    left: 30%;
}
.text-center{
    text-align: center;
}
.skill-name{
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 20px 0;
}
.skill-bar{
    height: 20px;
    background: #cacaca;
    border-radius: 8px;

}
.skill-per{
    height: 20px;
    background-color: #50c5fc;
    border-radius: 8px;
    width: 0;
    transition: 1s linear;
    position: relative;
}
.skill-per::before{
    content: attr(per);
    position: absolute;
    padding: 4px 6px;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    top: -35px;
    right: 0;
    transform: translateX(50%);
}
.skill-per::after{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #000;
    border-radius: 2px;
    top: -16px;
    right: 0;
    transform: translateX(50%) rotate(45deg);
}

/* COPYRIGHT- CODING WITH NICK*/
 
/* # ⚙️ Technology Used
1. HTML
2. CSS
3. jquery
 
# 🎓 Access this vedio
[Click Here] https://www.youtube.com/channel/UCsseF0Swqs5FsXXtEXo1m_A
 
## 👏 Support Developer
1. Subscribe & Share my YouTube Channel - https://www.youtube.com/channel/UCsseF0Swqs5FsXXtEXo1m_A
2. Add a Star 🌟  to this 👆 Repository */
 
/************************************************/

That’s all, now you’ve successfully Create a Animated Skill bar using HTML CSS & Jquery . If your code doesn’t work or you’ve faced any error And problem’s , please download the source code from the given download button

I Hope this blog will be helpful.

Read More –

• How To Create Responsive Image Gallery Using Html & Css
• Responsive Image Slider | With Manual Button & Auto-play – Html Css Javascript
• How create an Online Store Website Using Htm Css JS | Multi Page Website
• Create A Music Player Using Javascript | Javascript Audio Player
• Responsive Navigation Bar Design using HTML and CSS