How To Create a Skill Bar using CSS?

How to create a 3D groove border using CSS?

A skill bar is a type of progress bar that visually represents your proficiency in various skills, making it easier for recruiters or customers to understand your expertise. We will learn how to create a skill bar using CSS.

Approach

The HTML structure includes a container div with multiple div elements representing different skills, each with a class of “bar” and additional classes indicating the skill level. The “data-skill” attribute is used to specify the skill name.
The CSS includes keyframe animations that animate the width of the skill bars from 0% to their specified width, giving a loading effect.
The “.bar” class provides the base styling for the skill bars, including background color, padding, border-radius, margin, font size, color, and text-shadow. The “:: before” pseudo-element is used to display the skill name and animate the bar’s width.
Different skill levels are color-coded using additional classes, which apply different background colors to the “:: before” pseudo-element to visually distinguish between skill levels.
The width of each skill bar is determined using the “calc” function in CSS, which calculates the width based on the skill level, subtracting 10px to account for padding.

Example: The example below shows how To Create a Skill Bar CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <h1>Skill Set</h1>
        <div class="bar learning" 
             data-skill="TDD"></div>
        <div class="bar back basic" 
             data-skill="Python"></div>
        <div class="bar back intermediate" 
             data-skill="C#"></div>
        <div class="bar front advanced" 
             data-skill="CSS3"></div>
        <div class="bar front expert" 
             data-skill="HTML5"></div>
    </div>
</body>

</html>

CSS

/* style.css */
body {
    font-family: Helvetica, Arial, sans-serif;
}

.container {
    width: 50%;
    margin: 0 auto;
}

@keyframes load {
    from {
        width: 0%
    }
}

@-webkit-keyframes load {
    from {
        width: 0%
    }
}

@-moz-keyframes load {
    from {
        width: 0%
    }
}

@-o-keyframes load {
    from {
        width: 0%
    }
}

.bar {
    background-color: #EEE;
    padding: 2px;
    border-radius: 15px;
    margin-bottom: 5px;
    font-size: 14px;
    color: #FFF;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.bar::before {
    content: attr(data-skill);
    background-color: #f3b0ff;
    display: inline-block;
    padding: 5px 0 5px 10px;
    border-radius: inherit;
    animation: load 2s 0s;
    -webkit-animation: load 2s 0s;
    -moz-animation: load 2s 0s;
    -o-animation: load 2s 0s;
}

.bar.front::before {
    background-color: #ffcc33;
}

.bar.back::before {
    background-color: #a6cfe3;
}

.bar.learning::before {
    width: calc(20% - 10px);
}

.bar.basic::before {
    width: calc(40% - 10px);
}

.bar.intermediate::before {
    width: calc(60% - 10px);
}

.bar.advanced::before {
    width: calc(80% - 10px);
}

.bar.expert::before {
    width: calc(100% - 10px);
}

Output:

Output

Tags:

#CSS #Web Technologies

How to create a 3D groove border using CSS?

How to Create a Tag Cloud with CSS ?