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