Skill Bar Design – Horizontal Bar Chart with CSS
Hello, Today we are going to create a skills bar with CSS. Because most people like to add skill bars in their online CV or resume to display skills in different subjects. First of all, you have to open your editor and Then, in your HTML file, you have to write the below codes.
Let’s create an Html file
<!DOCTYPE html>
<html>
<head>
<title>Skill Meter</title>
</head>
<body>
<div class="box">
<h1>Skills Bar</h1>
<div class="skillbox">
<p>HTML</p>
<p>90%</p>
<div class="skill">
<div class="level"></div>
</div>
</div>
</div>
</body>
</html>If you add code correctly then, you can get the below the page.
After that, you can add other skills.
<!DOCTYPE html>
<html>
<head>
<title>Skill Meter</title>
</head>
<body>
<div class="box">
<h1>Skills Bar</h1>
<div class="skillbox">
<p>HTML</p>
<p>90%</p>
<div class="skill">
<div class="level"></div>
</div>
</div>
<div class="skillbox">
<p>CSS</p>
<p>80%</p>
<div class="skill">
<div class="level"></div>
</div>
</div>
<div class="skillbox">
<p>JavaScript</p>
<p>85%</p>
<div class="skill">
<div class="level"></div>
</div>
</div>
<div class="skillbox">
<p>JAVA</p>
<p>75%</p>
<div class="skill">
<div class="level"></div>
</div>
</div>
<div class="skillbox">
<p>Python</p>
<p>70%</p>
<div class="skill">
<div class="level"></div>
</div>
</div>
</div>
</body>
</html>Here I used div, h1 tags with classes and after that you can see below page.
Let’s create a CSS file
After that, we will add colors to your skill bar. For that, I created a style.css file and connected it to my HTML file using a link tag.
<link rel="stylesheet" type="text/css" href="style.css">I add this <link> tag within the <head> tag.
Then In the style.css file, you have to add the below code.
body
{
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #fff;
}
.box
{
width: 600px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 25px 20px;
background: #120136;
box-sizing: border-box;
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}An element with position: absolute, It is positioned relative to the nearest positioned parent.
CSS transform allows you to move, rotate, scale, and skew elements. So, here I used to translate (x,y) method, It moves an element from its current position. This div element is moved to the center of the page.
Here padding properties are used to generate space around an element’s content.
padding: 25px 20px;- Top and bottom paddings are 25px
- right and left paddings are 20px
box-shadow property
box-shadow property is used to add a shadow around the box border.
box-shadow: 0 20px 40px rgba(0,0,0,0.5);
- first value applies to define h-offset. It means horizontal offset of the shadow
- second value applies to define v-offset. It means vertical offset of the shadow
- third value applies to define the blur radius
- fourth value applies to define colour of the shadow
Colors in CSS can be specified by Hexadecimal colors, RGB colors, RGBA colors, etc… Here I used the RGBA method.
rgba(0,0,0,0.5);
Its’ values are rgba(red, green, blue, alpha). Here alpha is the opacity (transparent) of the element.
So, if you correctly add the above codes, you can view the below the web page.
After that, we will see how to design the content of the inside of the box.
h1
{
margin: 0;
padding: 0;
color: #fff;
text-align: center;
letter-spacing: 2px;
text-transform: uppercase;
}An element with text-transform: uppercase, used to change your word or sentence into capital letters. If you add this code, it will change your web page like below.
Then we have to design our skill box.
.skillbox
{
box-sizing: border-box;
width: 100%;
margin: 20px 0;
}
.skillbox p
{
padding: 0;
letter-spacing: 1px;
margin: 0 0 15px;
text-transform: uppercase;
color: #fff;
font-weight: bold;
}
.skillbox p:nth-child(2)
{
float: right;
position: relative;
top: -25px;
}Here I used the font-weight property to set thick or thin characters in text that should be displayed. You can use normal, bold, bolder, lighter, etc…
Here:nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent. n can be any number, keyword, or formula.
<div class="skillbox">
<p>HTML</p>
<p>90%</p>
<div class="skill">
<div class="level"></div>
</div>
</div>I got n as above 2 nd <p> tag. Because of that here we wrote n=2.
However, float property is used for positioning and formatting content.
Then, we use position: relative property. It defines the element’s positioned relative to its normal position. after adding these properties with values, then you can see the below page with your skills.
Moreover, we see how to add a skill bar in Html.
.skill
{
box-sizing: border-box;
background: #fff;
border-radius: 8px;
}
.level
{
width: 100%;
height: 15px;
border-radius: 8px;
}If you add codes correctly then you can see the below output.
But here we can’t see levels Know? But you can see the Html bar chart. so what can we do for that skill level? Mmmm….. then, we will see it. To add skills levels, you have to do something.
Add Levels
<!DOCTYPE html>
<html>
<head>
<title>Skill Meter</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box">
<h1>Skills Bar</h1>
<div class="skillbox">
<p>HTML</p>
<p>90%</p>
<div class="skill">
<div class="level" style="width: 90%; background: #2fc4b2;"></div>
</div>
</div>
<div class="skillbox">
<p>CSS</p>
<p>80%</p>
<div class="skill">
<div class="level" style="width: 80%; background: #d32626;"></div>
</div>
</div>
<div class="skillbox">
<p>JavaScript</p>
<p>85%</p>
<div class="skill">
<div class="level" style="width: 85%; background: #79d70f;"></div>
</div>
</div>
<div class="skillbox">
<p>JAVA</p>
<p>75%</p>
<div class="skill">
<div class="level" style="width: 75%; background: #b5076b;"></div>
</div>
</div>
<div class="skillbox">
<p>Python</p>
<p>70%</p>
<div class="skill">
<div class="level" style="width: 70%; background: #fed330;"></div>
</div>
</div>
</div>
</body>
</html>After all, You have to add width and background properties with values per each skill in your Html file, like the above code. Thus, it will change your skill bar to a colorful one.
Then you can see this skills bar on your web page. You can use these things when you are creating your own CV for the job interview. It is better to try. Thank you a lot and keep with us to know more and we will be soon with the next part. And also please share this with your friends and if you have a problem, you can comment here.
