Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a skill bar with CSS?
If you want to display a skill bar stating the proficiency of a skill, then create a skill bar. Let's say we are showing programming proficiency that a student is proficient in which programming language. Create a skill bar and display the proficiency in percentage with different colors for different skills. Let us see how to create a skill bar with CSS.
Syntax
.container {
width: 100%;
background-color: color;
border-radius: value;
}
.skill-bar {
width: percentage%;
background-color: color;
text-align: center;
color: white;
border-radius: value;
}
Create a Container
Create a div container for each skill bar. We have shown only a single skill bar below −
<h3>Python</h3> <div class="container"> <div class="python">75%</div> </div>
Other skill bars are shown below −
<h3>Java</h3> <div class="container"> <div class="java">80%</div> </div> <h3>C++</h3> <div class="container"> <div class="cpp">90%</div> </div> <h3>C</h3> <div class="container"> <div class="c">60%</div> </div>
Style the Container
The div container for each skill bar is styled like this. The width is set to 100% to create the background track −
.container {
width: 100%;
background-color: rgb(231, 231, 231);
border-radius: 20px;
}
Individual Skill Bars Styling
All the skill bars are styled with bold font weight and centered text. The border-radius property creates rounded edges −
.cpp, .java, .python, .c {
text-align: center;
font-weight: bolder;
padding-top: 3px;
padding-bottom: 3px;
color: white;
border-radius: 20px;
}
Add Percentage Values
For each skill bar, the percentage values are set using the width property. Different background colors distinguish each skill −
.cpp {
width: 90%;
background-color: #4caf50;
}
.java {
width: 80%;
background-color: #2196f3;
}
.python {
width: 75%;
background-color: #f44336;
}
.c {
width: 60%;
background-color: #808080;
}
Example
Here's the complete code to create skill bars with CSS −
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
h1 {
text-align: center;
color: #333;
}
.container {
width: 100%;
background-color: rgb(231, 231, 231);
border-radius: 20px;
margin-bottom: 15px;
}
.cpp, .java, .python, .c {
text-align: center;
font-weight: bolder;
padding: 8px 0;
color: white;
border-radius: 20px;
transition: width 0.3s ease-in-out;
}
.cpp {
width: 90%;
background-color: #4caf50;
}
.java {
width: 80%;
background-color: #2196f3;
}
.python {
width: 75%;
background-color: #f44336;
}
.c {
width: 60%;
background-color: #808080;
}
h3 {
margin-bottom: 5px;
color: #333;
}
</style>
</head>
<body>
<h1>Programming Proficiency</h1>
<h3>C++</h3>
<div class="container">
<div class="cpp">90%</div>
</div>
<h3>Java</h3>
<div class="container">
<div class="java">80%</div>
</div>
<h3>Python</h3>
<div class="container">
<div class="python">75%</div>
</div>
<h3>C</h3>
<div class="container">
<div class="c">60%</div>
</div>
</body>
</html>
A webpage displaying "Programming Proficiency" as the title with four colored skill bars below: C++ (green, 90% width), Java (blue, 80% width), Python (red, 75% width), and C (gray, 60% width). Each bar shows the percentage text in white and has rounded corners.
Conclusion
CSS skill bars are created by using container divs for the background track and inner divs with different widths to represent skill levels. The combination of background colors, border-radius, and width percentages creates an effective visual representation of proficiency levels.
2K+ Views
