DEV Community

Cover image for Animated Skills Bar using HTML and CSS

Animated Skills Bar using HTML and CSS

Shantanu Jana on August 22, 2021

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 ...
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
 
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
 
razar profile image
فرهاد روحانی مقدس •

Hello
You wrote a very good article

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
 
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