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.