Creating a Skill Bar with CSS

Introduction

In this post I will include an example of a skill bar. This is something I included in my initial site version in the About page. I decided to remove the skill bar due to the ambiguity of how to interpret such numbers. Still it is a pretty neat bit of code so I will showcase it here as a reference.

The Code

Before I present the live object I will show the HTML and CSS used to create the object. This utilizes BEM methodology along with my own modifications to keep things organized.

Notice that in my use of BEM I have two blocks: the initial container class and the individual skill-bar class. Let's take a look at the HTML first.

<div class="skills">
    <h2 class="skills__header">Skills</h2>
    <div class="skill skill--python">
        <span class="skill__type">Python</span>
        <div class="skill__bar">
            <div class="skill__progression" style="width: 90%">
                <span class="skill__level">90%</span>
            </div>
        </div>
    </div>
    <div class="skill skill--r">
        <span class="skill__type">R</span>
        <div class="skill__bar">
            <div class="skill__progression" style="width: 85%">
                <span class="skill__level">85%</span>
            </div>
        </div>
    </div>
    <div class="skill skill--html">
        <span class="skill__type">HTML</span>
        <div class="skill__bar">
            <div class="skill__progression" style="width: 80%">
                <span class="skill__level">80%</span>
            </div>
        </div>
    </div>
    <div class="skill skill--css">
        <span class="skill__type">CSS</span>
        <div class="skill__bar">
            <div class="skill__progression" style="width: 70%">
                <span class="skill__level">70%</span>
            </div>
        </div>
    </div>
    <div class="skill skill--excel">
        <span class="skill__type">Excel</span>
        <div class="skill__bar">
            <div class="skill__progression" style="width: 85%">
                <span class="skill__level">85%</span>
            </div>
        </div>
    </div>
</div>

As for the CSS I have

/*--------------------------------------*\
    || Skills Block Section
\*--------------------------------------*/
.skills {
    --custom-color: whitesmoke;
    display: flex;
    flex-direction: column;

    background: silver;
    width: calc(100% - 20px);
    padding: 10px;
    margin: 0px 0px 20px 0px;
}

/* Skills elements */
.skills__header {
    padding: 0px;
    color: var(--site-text-color);
    margin: 0px;
    font-family: sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
}





/*--------------------------------------*\
    || Skill Block Section
\*--------------------------------------*/
.skill {
    display: flex;
    flex-direction: column;
    padding: 8px 0px;
    width: 100%;
}

/* Skill color modifiers */
.skill--python {
    --custom-color: #979700;
}
.skill--r {
    --custom-color: #495055;
}
.skill--html {
    --custom-color: #185e9b;
}
.skill--css {
    --custom-color: #ac680f;
}
.skill--excel {
    --custom-color: #145828;
}

/* Skill elements */
.skill__type {
    justify-content: left;
    color: var(--custom-color);
    margin: 0px;
    font-family: sans-serif;
    padding-bottom: 3px;
    letter-spacing: 2px;
}

.skill__bar {
    --border-width: 2px;

    background: var(--dark-color-dark-mode);
    width: calc(100% - 2 * var(--border-width));
    border: var(--border-width) solid var(--custom-color);
    padding: 0px;
    margin: 0px;
}

.skill__progression {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    height: 16px;
    background: var(--custom-color);
}

.skill__level {
    font-size: 12px;
    color: rgb(219, 219, 219);
    margin-right: 5px;
}

The Example

Conclusion

So there is my version of a skill-bar. Probably my favorite addition to this basic formula is my use of CSS variables in the "skill modifier section." Simple as it may be, I think combining CSS variables with modifiers is really useful. This is because in some cases we may use a base color in multiple places. If we modified it without the use of a variable we would have to change every declaration instead of just the variable.