Create Animated Skills Bar Using HTML CSS & JAVASCRIPT.

Author - Maketechstuff
July 22, 2023
0

In this article we going to make animated skills bar using html CSS and JavaScript.

Skills bar are used to show, how many and how much (Generally it shows in scale of 100%) skills you have.


create animated skills bar


You may have seen skills bar in many websites especially in portfolio websites. I have made these bars as a skill bar you can also use it as to show the target bar.


This skills bar show progress in bar and percentages after page loads with animation. Means after window loads all skill bars started increasing along with their percentages up to set limit.


Video Tutorial on Animated Skill Bars.



Skills Bar.

File struture:

  1. Create one folder.
  2. Open it in your code editor.
  3. Create two another folder in that folder with name index.html and index.css.


I've integrated JavaScript with in the HTML file.


Let's create animated skills bar using html CSS and JavaScript step by step.


Step 1: Create basic structure of html.

HTML


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skill box</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>



</body>

<script>

</script>

</html>

CSS


*{
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}
body{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f2f2;
}

Output:


Background for skills bar


Step 2: Create box to add skills bar.

Create box to add title.


HTML


    <div class="container">
        <h3>Skills</h3>

      
    </div>

CSS


.container{
    width: 500px;
    background-color: #fff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0px 10px 30px -15px blue;
}
.container h3{
    font-size: 40px;
    text-align: center;
    margin-bottom: 20px;
}

Output:


Skill Bar Title


Step 3: Create skills bar boxes.

Now let's create skills bars after the title.


HTML


        <div class="box">
            <p style="font-size: 25px; font-weight: bold;">HTML</p>
            <div class="progress_bar_box">
                <div class="progress_bar">
                    <span class="line"></span>
                </div>
                <p class="increasing_percentage">0%</p>
                <div class="total_percentage">80%</div>
            </div>
        </div>
        
        <div class="box">
            <p style="font-size: 25px; font-weight: bold;">CSS</p>
            <div class="progress_bar_box">
                <div class="progress_bar">
                    <span class="line"></span>
                </div>
                <p class="increasing_percentage">0%</p>
                <div class="total_percentage">50%</div>
            </div>
        </div>

        <div class="box">
            <p style="font-size: 25px; font-weight: bold;">JAVASCRIPT</p>
            <div class="progress_bar_box">
                <div class="progress_bar">
                    <span class="line"></span>
                </div>
                <p class="increasing_percentage">0%</p>
                <div class="total_percentage">65%</div>
            </div>
        </div>

        <div class="box">
            <p style="font-size: 25px; font-weight: bold;">PHP</p>
            <div class="progress_bar_box">
                <div class="progress_bar">
                    <span class="line"></span>
                </div>
                <p class="increasing_percentage">0%</p>
                <div class="total_percentage">40%</div>
            </div>
        </div>

CSS


.container h3{
    font-size: 40px;
    text-align: center;
    margin-bottom: 20px;
}
.container .box{
    width: 100%;
    margin: 10px 0px;
}
.box .progress_bar_box{
    display: flex;
    align-items: center;
}
.box .progress_bar_box .progress_bar{
    width: 100%;
    height: 10px;
    background-color: #f2f2f2;
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}
.box .progress_bar_box .progress_bar .line{
    position: absolute;
    width: 0%;
    height: 100%;
    background-color: blue;
    border-radius: 100px;
    transition: 0.2s;
}
.box .progress_bar_box .increasing_percentage{
    margin-left: 10px;
    font-size: 25px;
}
.box .progress_bar_box .total_percentage{
    display: none;
}


We'll add total percentag (class="total_percentage") as a limit for line (class="line") and percentage (class="increasing_percentage").


Output:


skills bar


Step 4: Add JavaScript for functionality of skill bar to progress on load.

First let's select all box class (all skill box).


JavaScript


let boxes = document.querySelectorAll(".box");


Now we want skill bar and its percentage to increase after 1 second on window load. So let add onload event on window and call function with name load_bars() after 1 second.


JavaScript


    window.onload = function(){
        setTimeout(() => {
            load_bars();
        }, 1000);
    }


Now let's create that load_bars() function.

We have selected all box class, we need to target each box classes and its inner tags also. 


So, we going to use foreach method of JavaScript to box class and define require variables.


JavaScript


    function load_bars(){
        boxes.forEach(box => {
            let line = box.querySelector(".line");
            let increasing_percentage = box.querySelector(".increasing_percentage");
            let total_percentage = box.querySelector(".total_percentage");
            
            let p = 0;

		

           
        });
    }

Now let's run setInterval function and inside it and increment variable p by one.


Now we going to use p variable value as a width of progress bar (that is class="line"). And inner HTML for percentage (that is class="increasing_percentage").


JavaScript


    function load_bars(){
        boxes.forEach(box => {
            let line = box.querySelector(".line");
            let increasing_percentage = box.querySelector(".increasing_percentage");
            let total_percentage = box.querySelector(".total_percentage");
            
            let p = 0;
            let my_interval = setInterval(() => {
                p++;
                line.style.width = p + "%";
                increasing_percentage.innerHTML = p + "%";

            }, 25);
        });
    }


But till where this p variable increases or you can say till where this setInterval going to run. We need to stop it somewhere.


Now here the role of the total_percentage class comes. We going add if condition, when increasing_percentage class inner HTML is equal to total_percentage class inner HTML then we clear the timeinterval or stop it.


JavaScript


    function load_bars(){
        boxes.forEach(box => {
            let line = box.querySelector(".line");
            let increasing_percentage = box.querySelector(".increasing_percentage");
            let total_percentage = box.querySelector(".total_percentage");
            
            let p = 0;
            let my_interval = setInterval(() => {
                p++;
                line.style.width = p + "%";
                increasing_percentage.innerHTML = p + "%";
                if(increasing_percentage.innerHTML == total_percentage.innerHTML){
                    clearInterval(my_interval);
                }
            }, 25);
        });
    }


You can see demo in above YouTube video.


You may like:

  1. How to create live password strength indicator bar using HTML, CSS and JavaScript.
  2. How to create a search bar using HTML and CSS.
  3. How to create search bar with dropdown select menu using HTML, CSS and JavaScript.


Final code:



That’s it animated skill bar is ready using html CSS & JavaScript. If you have any query or suggestion you can write in comment section.


Tags

You may like these posts

Show more

Post a Comment

0Comments

Share your thoughts.

Post a Comment (0)
Share to other apps
Copy Post Link
To Top