DEV Community

Cover image for Animated Skills Bar using HTML and CSS
Shantanu Jana
Shantanu Jana

Posted on • Edited on

Animated Skills Bar using HTML and CSS

#html #css #beginners #webdev

In this article I am going to show you how to create Animated Skills Bar using only HTML and CSS code. I have designed many more types of progress bars before. But in that case I used JavaScript or JQuery. I have created this Skills Bar only with the help of HTML and CSS code.

First I made a small box on a web page. Then I added a title to that box and used four progress bars. Each progressbar is given a specific value. When you load this page, this animation will reach your pre-determined meaning from zero. It will take you two seconds to reach your predefined value so we can see a kind of animation here.

Here I have created this animation using @keyframes of CSS code.

Below I show you the complete step by step how I created this Animated Skills Bar using HTML and CSS code. You can also download the source code to create it.

Step 1: Design the web page

First I designed the web page using some CSS code below. Here I have used the background color blue of the webpage.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
  height:100vh;
    background-color: #0a7aca;
}
Enter fullscreen mode Exit fullscreen mode

Design the web page

Step 2: Create a box on the webpage

Now I have created a box using the HTML and CSS code below. As I said before there is a box on the web page in which all the progress bars are made.

I used box-shadow: 0 20px 30px rgba (0,0,0,0.2) here to create a color shadow around that box. I used border-radius: 10px to make it a bit round.

<div class="wrapper">
  <div class="container">

  </div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.wrapper{
    width: 40%;
    min-width: 590px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.container{
    width: 100%;
    padding: 30px 30px 50px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 20px 30px rgba(0,0,0,0.2);
} 

.container *{
    font-family: "Poppins",sans-serif;
    color: black;
    font-weight: 500;
}
Enter fullscreen mode Exit fullscreen mode

Create a box on the webpage

Step 3: Add the title to the box

Now I have created a heading using the code below. A heading has been used here as you can see in the picture above. The font-size: 33px of this heading and text-align: center has been used to place it in the middle.

  <h2>Animated Skills </h2>
Enter fullscreen mode Exit fullscreen mode 
h2{
    margin-bottom: 50px;
    letter-spacing: 2px;
    text-align: center;
    font-size: 33px;
    font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

Add the title to the box

Step 4: Add all the information in the Skills bar

Now I have added all the basic information of this Animated Skills Bar using HTML code. First, I have added information from one of the four bars in this progress bar. And its possible result I have shown in the picture below.

 <div class="skills">
   <div class="details">
     <span>HTML</span>
     <span>90%</span>
   </div>
   <div class="bar">
      <div id="html-bar"></div>
   </div>
 </div>
Enter fullscreen mode Exit fullscreen mode

Add all the information in the Skills bar

Above we have added a Skills bar information. Now I have added the information of the other three progress bars.

 <div class="skills">
   <div class="details">
     <span>CSS</span>
     <span>75%</span>
   </div>
   <div class="bar">
      <div id="css-bar"></div>
   </div>
 </div>
Enter fullscreen mode Exit fullscreen mode 
 <div class="skills">
   <div class="details">
     <span>Javascript</span>
     <span>72%</span>
   </div>
   <div class="bar">
      <div id="javascript-bar"></div>
   </div>
 </div>
Enter fullscreen mode Exit fullscreen mode 
 <div class="skills">
   <div class="details">
     <span>jQuery</span>
     <span>68%</span>
   </div>
   <div class="bar">
      <div id="jQuery-bar"></div>
   </div>
 </div>
Enter fullscreen mode Exit fullscreen mode

Add all the information in the Skills bar

Step 6: Design the skills bar with css code

Now I have designed the above added information with the help of CSS code. Here a border is used around the animation line for which I have used border: 2px solid # 0d96e0. Here I have used the height of the animation line: 9px.

I used border-radius: 10px to make the two ends of the line even and round. I have used the width: 0 of this progress bar animation line, which means that under normal circumstances no skills animation will be seen here. Later I gave different values ​​for each using @keyframes.


.details{
    width: 100%;
    display: flex;  
    justify-content: space-between;
    margin-bottom: 10px;
}
.bar{
    position: relative;

    border: 2px solid #0d96e0;

    border-radius: 20px;

}
.bar div{
    position: relative;
    width: 0;
    height: 9px;
    border-radius: 10px;
    background-color: #0d96e0;


}
Enter fullscreen mode Exit fullscreen mode

Using the CSS code below I have created a distance between each of the skills bars. For this margin-bottom: 30px is used which will create a distance of 30px between each bar.

.skills:not(:last-child){
    margin-bottom: 30px;
}
Enter fullscreen mode Exit fullscreen mode

Design the skills bar with css code

Step 7: Set a specific value for the animation of each Skills bar

As I said above, I used the width: 0 of the progress bar animation line here, which means that the animation line cannot be seen under normal conditions. Now I have given different values ​​for each.

I have used width: 90% for the first line here, which means that this colorful line will stop at 90% when it is loaded. I set a time of two seconds to do this animation with it.

#html-bar{
    animation: html-fill 2s forwards;
}
@keyframes html-fill{
    100%{
        width: 90%;
    }
}
Enter fullscreen mode Exit fullscreen mode

et a specific value for the animation of each Skills bar

In the same way I have added specific values ​​for three more CSS progress bars. The more you change the value of width, the more the value of the colorful line will change.

#css-bar{
    animation: css-fill 2s forwards;
}
@keyframes css-fill{
    100%{
        width: 75%;
    }
}
Enter fullscreen mode Exit fullscreen mode 
#javascript-bar{
    animation: js-fill 2s forwards;
}
@keyframes js-fill {
    100%{
        width: 72%;
    }
}
Enter fullscreen mode Exit fullscreen mode 
#jQuery-bar{
    animation: jQuery-fill 2s forwards;
}
@keyframes jQuery-fill{
    100%{
        width: 58%;
    }
}
Enter fullscreen mode Exit fullscreen mode

Animated Skills Bar HTML and CSS

Hopefully from this tutorial above you have fully learned how I created this Animated Skills Bar using only HTML and CSS code. In the meantime I have created many more designs using HTML and CSS code. You can see those designs if you want. You will let us know how you like this skills bar by commenting.

Related Post:

  1. Responsive Footer HTML CSS
  2. International Schools in Bangalore
  3. Simple Stopwatch using JavaScript
  4. Preschools in Whitefield
  5. javaScript Password Generator
  6. International Schools in Hyderabad
  7. Sidebar Menu Using HTML CSS

You can visit my blog for more tutorials like this.
https://www.foolishdeveloper.com/

Top comments (16)

Collapse
 
arminmon profile image
Armin Monirzadeh •

A few opinions/notes:

  1. It's encouraged to use semantic HTML as much as possible. progress and meter tags are already supported widely enough.
  2. Using progress bar to indicate the level of a skill, unless the discrete values of the levels are well-established, is not a good design practice. For that it doesn't communicate the competency properly.
Collapse
 
rlautan profile image
Ravi •

It pains me to see people use this method to communicate skill level. I do ask applicants how they see this themselves. I don't believe any expert level programmer would rate themselves 100% either. I'd prefer code to do the talking along with some motivation on the applicants part.

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan •

I agree, I don't really think anyone could truly be at 100% of any skill really. An approach I use is to break skill levels down into "great", "good", "fair", and "basic". This gives interviewers a rough insight and a platform from which they can ask questions to guage my knowledge. Having any skill at any percent completely ignores the dynamic flow of capabilities of the particular thing, be it a language or framework. But saying you're good or great at something implies a level of knowledge without insinuating that you know everything about it (which is virtually impossible unless you created that thing!)

Collapse
 
mattcoady profile image
Matt Coady • • Edited

But how do I tell people I'm 68.429% javascript

Thread Thread
 
arminmon profile image
Armin Monirzadeh •

console.log(me.javaScript.percentage)

Collapse
 
yodasoda profile image
Jan Claasen •

Best advice this

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan •

Absolutely agree. The usage of <div>s here tells me that their accessibility <div> is very near the 0 mark.

Collapse
 
stevehoskins profile image
Steve Hoskins •

Hi Shantanu. Thanks for this post, it's brilliantly written and I will be going through it step by step as you have shown. I am new to coding and hence my levels would be very low, lol. I have to agree with comments anyway that this is totally subjective. I might feel that I have mastered a language only to find out later that I have only scraped the surface. The thing is though, the techniques are transferable and interesting to look at.
Thanks again,
Steve

Collapse
 
nemethricsi profile image
Richard •

Nice article thank you! There is a mismatch id="javascript-bar" and CSS selector #js-bar

Collapse
 
shantanu_jana profile image
Shantanu Jana •

Thank you for pointing out this mistake. I have changed this.

Collapse
 
razar profile image
فرهاد روحانی مقدس •

Hello
You wrote a very good article

Collapse
 
itscasey profile image
Casey 💎 •

Hey Shantanu, this is a great write up and I appreciate how you showed the progress of each step

Well done!

Collapse
 
shantanu_jana profile image
Shantanu Jana •

Welcome

Collapse
 
tim012432 profile image
Timo •

Looks nice. But I would never try to display a skill in a percentage. What does 100% in a certain skill mean to you?

Collapse
 
peterbrk57 profile image
Peter • • Edited

I think it is an example! Change % in points or whatever!
A nice article!

Collapse
 
tim012432 profile image
Timo •

That makes no difference. No body could rate their skill in Javascript or whatever in 10 points out of 10. That's not possible. And then what do 5 points out of 10 mean? Half experience or what
It's bad communication

View full discussion (16 comments)

Read next

ricardocaselati profile image

Types: char and boolean

Ricardo Caselati -

pawandeore profile image

Introduction to Git: A Powerful Version Control System

pawan deore -

dotnetfullstackdev profile image

Static Keyword in C# Explained in 1 Minute

DotNet Full Stack Dev -

ingosteinke profile image

Accessible, sustainable, and creative web development

Ingo Steinke, web developer -