In this tutorial, we will learn how to create a simple, CSS-Only (no
Javascript), progress bar that shows when an element is hovered. As is
my style, I will be giving you multiple options for doing this, as
opposed to simply one method, with one style.
NB: Only one method is available atm, but I'll add more soon.
method #1: element+element, width~transition.
<div
class="progressbar-container">
<div
class="progress-bar">
</div>
<label>
hover me</label>
</div>
As you can see, this method requires two elements, a container and
the actual progress bar. The container needs to be relatively
positioned, and the progress bar element needs to be absolutely
positioned.
The label is not necessary, but it's a nice addition to have,
especially seeing as this progress bar is not programatically
controlled (driven by a set of controlling code, in a programming
language such as JavaScript).
the actual css code
the container:
.progressbar-container {
/*Optional:*/
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
background-color: rgb(35, 35, 35);
margin-right: auto;
margin-left: auto;
border-radius: 3px;
max-width: 100%;
height: 50px;
/*Required:*/
position: relative;
}
This gives a rough idea you can build around. You don't need a shadow,
and you can leave the border at its default value. Even width and
height are flexible. The only thing you need to do is to make
certain that the container is relatively positioned.
I also recommend using contrasting colours for your container's
background and progress bar.
the progress bar:
.progress-bar {
/*Required:*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 100%;
transition: 1s;
/*optional:*/
border-radius: 1px;
background-color: white;
}
.progressbar-container:hover .progress-bar {
right: 0;
}
For the progress bar, we need an element that is positioned
absolutely. It also needs to be aligned to the edges of the
container, so we set the values left, top, & bottom to
"0," and right to "100%." We need a
transition value as well, because we want the progress bar to
be animated. To achieve this, we set right to "0"
when the container is hovered.
As with the container, appearance is largely flexible here. I do
recommend, however, that you choose contrasting colours for each
component. In this case, I've made the container dark-grey, and the
progress bar white.
BONUS - the label:
.progressbar-container label {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
letter-spacing: 8px;
color: rgba(255, 255, 255, 0.8);
transition: 1s;
}
.progressbar-container:hover label {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
letter-spacing: 8px;
color: rgba(35, 35, 35, 0.7);
}
Of course, you don't need a label, but I recommend including one, as
it isn't necessarily obvious what your progress bar is, or what it is
for. As a bonus, adding a label just looks nice, from a design
perspective. As your proficiency improves, you can even find other
usages for this label. It doesn't even need to be text.
In any case, the label needs to be positioned absolutely.
However, unlike the progress bar, it doesn't need to be
positioned edge-to-edge. I did so in this case because I wanted the
text of the label to be aligned directly to the center of the
container. You can put it where ever you'd like, or whereever best
fits your design, or skip it altogether.