N ways to implement various progress bars using only HTML/CSS

This article will introduce how to use HTML/CSS to create various basic progress bars and fancy progress bars and their animation methods. Through this article, you may learn:

• Create a progress bar with the HTML tag <meter>
• Create a progress bar with the HTML tag <progress>
• Limitations of HTML implementation of progress bars
• Use CSS percentages, gradients to create a normal progress bar and its animation
• Use CSS to create a circular progress bar
• Use CSS to create a spherical progress bar
• Use CSS to create a 3D progress bar

The progress bar is one of the many used in our daily interface, let's take a look below. To this day, how can we implement the progress bar.

HTML tags - meter & progress

This may not be clear to some students. HTML5 <meter> provides two tags 061834cc0cc628 and <progress> to implement the progress bar.

• <meter> : used to display the scalar value or fractional value of a known range
• <progress> : Used to display the completion progress of a task. Normally, this element is displayed as a progress bar

Let's take a look separately, first is the <meter> tag:

<p>
    <span>完成度：</span>
    <meter min="0" max="500" value="350">350 degrees</meter>
</p>

meter {
    width: 200px;
}

The style is as follows:

Among them, min , max , and value respectively represent the maximum value, the minimum value and the current value.

Coincidentally, let's take a look at the usage of the <progress>

<p>
    <label for="file">完成度：</label>
    <progress max="100" value="70"> 70% </progress>
</p>

progress {
    width: 200px;
}

The style is as follows:

Among them, the max attribute describes the total amount of work that the task represented by the progress element needs to complete, and the value attribute is used to specify the amount of work completed by the progress bar.

The difference between meter & progress

So the question is, from the above Demo, the effects of the two labels are exactly the same, so what is the difference between them? Why are there two labels that look the same?

The biggest difference between these two elements that difference in semantics .

• <meter> : represents scalar value within a known range or measurement point value
• <progress> : represents complete the task progress

For example, if a requirement is currently completed, <progress> should be used, and if the current speed value of the car dashboard is to be displayed, meter should be used.

Limitations of meter & progress

Of course, in actual business requirements or production environments, you will almost never see the <meter> and <progress> tags.

Similar to the reason mentioned in this article- "Using datalist to implement filterable drop-down selection boxes" 161834cc0cca3d, which are:

1. We cannot effectively modify <meter> and <progress> tags, such as background color, progress foreground color, etc. And, the most fatal thing is that the performance of browser default styles is not consistent between different browsers. This is a catastrophic shortcoming for businesses that pursue stability and have consistent UI performance!
2. We can’t add some animation effects and interactive effects to him, because in some actual application scenarios, it’s definitely not a simple display of a progress bar and nothing more.

Use CSS to implement progress bar

Therefore, at this stage, more CSS is used to implement the progress bar.

Use percentage to implement progress bar

The most common way is to use background color with percentage to make progress bar.

The simplest one DEMO:

<div class="g-container">
    <div class="g-progress"></div>
</div>

.g-container {
    width: 240px;
    height: 25px;
    border-radius: 25px;
    background: #eee;
}
.g-progress {
    width: 50%;
    height: inherit;
    border-radius: 25px 0 0 25px;
    background: #0f0;
}

The effect is as follows:

The advantage of this method is that it is easy to use, and the actual progress can be easily passed into the CSS

1. Use the HTML style attribute to fill in the complete width value, such as <div class="g-progress" style="width: 50%"></div>
2. Or use the CSS custom attribute <div class="g-progress" style="--progress: 50%"></div> match the actual CSS width: var(--progress)
3. Completely customizable styles, and can easily add auxiliary rich animation and interactive effects

For example, add a transition effect g-progress

.g-progress {
    // ...
    transition: width .2s linear;
}

In this way, each progress change is a dynamic transition process:

Or, for the gradient foreground color, modify background: #0f0 to background: linear-gradient(90deg, #0f0, #0ff) :

Single label using gradient implementation

Of course, you can see that we used the structure of two tags above:

<div class="g-container">
    <div class="g-progress"></div>
</div>

Stingy, we can also just use a label to complete this thing, mainly with the help of gradient to complete this thing:

<div class="g-progress"></div>

.g-progress {
    width: 240px;
    height: 25px;
    border-radius: 25px;
    background: linear-gradient(90deg, #0f0, #0ff 70%, transparent 0);
    border: 1px solid #eee;
}

The results are as follows:

Similarly, we can use the HTML style attribute to fill in the complete background value to pass the actual percentage. Of course, it is more recommended to use CSS custom attributes to pass the value:

<div class="g-progress" style="--progress: 50%"></div>

.g-progress {
    background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
}

Students who are familiar with CSS will find a drawback of the current method. When the value of --progress .g-progress added to transition , there will be no transition animation effect.

The reason is that in CSS, gradients (such as linear-gradinet , radial-gradient , conic-gradient ) do not support transitional transformations.

So, here, in order to achieve the animation effect, we can use CSS @property to transform our code:

<div class="g-progress" style="--progress: 70%"></div>

@property --progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.g-progress {
    margin: auto;
    width: 240px;
    height: 25px;
    border-radius: 25px;
    background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);
    border: 1px solid #eee;
    transition: .3s --progress;
}

With the help of the characteristics of CSS @property, we can also achieve animation effects under a single tag:

CodePen Demo - Single-tab progress bar effect

If you don’t know about CSS @property, you can read this article of - 161834cc0cd0ef CSS @property makes the impossible possible

Of course, here is not only the percentage mentioned above, and the gradient two ways to achieve this most common progress bar, all the length changes can be used to achieve the progress bar, including but not Limited to:

• Width (it is more straightforward to use the width in percentages)
• Gradient (a value that controls the percentage of the transition point of the gradient)
• Gradient background-size
• transfrom: scale() (Zoom can also change the width size)
• clip-path for cutting
• ...(Etc., etc)

No further development here.

Arc-shaped progress bar

Of course, the progress bar cannot only be linear. There are many other types, let's first take a look at the arc-shaped progress bar.

Today, we can use CSS to quickly create a progress bar in the form of an arc, similar to this:

The core is to use the angular gradient background: conic-gradient() :

<div class="g-progress"></div>

.g-progress {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: conic-gradient(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
}

Using the angular gradient background: conic-gradient() , we can easily realize such a pie chart:

The next step is to hollow out the middle part.

The traditional idea is to superimpose a circle in the middle. However, a great disadvantage of this is that if our background is not a solid color but a gradient color, it will not apply, for example:

So how to hollow out the middle to make the middle part transparent? Here we can cleverly mask attribute, hollowing out the middle:

.g-progress {
    background: conic-gradient(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);
  + mask: radial-gradient(transparent, transparent 50%, #000 50%, #000 0);
}

In this way, we can easily hollow out the middle, even if the background is not a solid color.

CodePen Demo-Angular gradient to achieve arc-shaped progress bar

Based on this expansion, a multi-color arc-shaped progress bar can also be realized:

.g-progress {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    mask: radial-gradient(transparent, transparent 50%, #000 51%, #000 0);
    background: 
        conic-gradient(
            #FFCDB2 0, #FFCDB2 25%, 
            #B5838D 25%, #B5838D 50%, 
            #673ab7 50%, #673ab7 90%,
            #ff5722 90.2%, #ff5722 100%
        );
}

Of course, this may not be like a progress bar, but more like a pie chart?

The angular gradient realizes the limitations of the arc progress bar

Of course, this method has two drawbacks.

1. Of course, the percentage of progress is not similar to numbers like 0°, 90°, 180°, 270°, 360°, when using angular gradients, there will be obvious jaggedness at the convergence of different colors.

Look at an example conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D) :

The solution to this kind of problem is to leave some gradation space appropriately at the junction. Let's simply modify the above angular gradation code:

{
  - background: conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)`
  + background: conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27.2%, #B5838D)`
}

A closer look at the code above, from 27% to 27% a change, a change from 27% to 27.2% , this extra 0.2% is to anti-aliased, the actual effect of changing:

For specific use, you can select more than one range that will not see the blur, but also eliminate the aliasing as much as possible.

2. It is more troublesome to realize the circular arc progress bar at the beginning and end.

In another case, in actual use, what is required is an arc progress bar with a circle at the beginning and end, as shown in the following figure:

Of course, in this case, of course, the color of the progress bar is pure color can also be solved. We can achieve this effect by superimposing two small circles at the beginning and the end.

If the progress bar is a gradient color, this kind of progress bar needs to be implemented with the help of SVG/Canvas.

The above complete arc progress bar with rounded corners, you can here to see the complete source code - 161834cc0cd7d4 CodePen Demo - The arc progress bar with circular beginning and end

Spherical progress bar

Spherical progress bars are also relatively common, similar to the following:

For the spherical progress bar, the core is actually to use CSS to achieve the wave effect in the middle part.

This technique should be familiar to everyone today, so I won’t repeat it. A picture is worth a thousand words. You can use the rolling circle method, similar to this:

The container application overflow: hidden can get this effect:

If you don’t understand this technique, you can hit this article: pure CSS to achieve wave effect!

To apply this technique, you only need to simply encapsulate and control the height of the wave when the spherical container represents the progress 0%-100%. We can get animation effects from 0%-100%.

The complete code is roughly as follows:

<div class="container">
    <div class="wave-change"></div>
    <div class="wave"></div>
</div>

.container {
    width: 200px;
    height: 200px;
    border: 5px solid rgb(118, 218, 255);
    border-radius: 50%;
    overflow: hidden;
}
.wave-change {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0;
    top: 0;
    animation: change 12s infinite linear;
    
    &::before,
    &::after{
        content: "";
        position: absolute;
        width: 400px;
        height: 400px;
        top: 0;
        left: 50%;
        background-color: rgba(255, 255, 255, .6);
        border-radius: 45% 47% 43% 46%;
        transform: translate(-50%, -70%) rotate(0);
        animation: rotate 7s linear infinite;
        z-index: 1;
    }
    
    &::after {
        border-radius: 47% 42% 46% 44%;
        background-color: rgba(255, 255, 255, .8);
        transform: translate(-50%, -70%) rotate(0);
        animation: rotate 9s linear -4s infinite;
        z-index: 2;
    }
}
.wave {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: rgb(118, 218, 255);
    border-radius: 50%;
}

p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    color: #000;
    z-index: 10;
}

@keyframes rotate {
   to {
        transform: translate(-50%, -70%) rotate(360deg);
    }
}
@keyframes change {
    from {
        top: 80px;
    }
    to {
        top: -120px;
    }
}

For the complete code example, you can click here:

• CodePen Demo -- Pure Css Wave Progress bar
• CodePen Demo -- Pure Css Wave Progress bar Animation

3D progress bar

Well, the following 3D progress bar requires a basic grasp of CSS 3D.

You can read this article first - CSS 3D Animation | How amazing animations can be made using CSS alone?

It mainly uses a 3D cube. Next, let's implement a cube progress bar~

First, implement a cube with the following structure:

<div class="demo-cube perspective">
  <ul class="cube">
    <li class="top"></li>
    <li class="bottom"></li>
    <li class="front"></li>
    <li class="back"></li>
    <li class="right"></li>
    <li class="left"></li>
  </ul>
</div>

We can think of this cube as a three-dimensional progress bar container. By controlling the colors of the 6 sides, we can cleverly get a 3D progress bar effect.

Of course, in fact, we don't need so many faces, just 4 faces, just remove the left and right, and then use the gradient to modify the color of each face of the cube, remove the border, the core CSS code is as follows:

.demo-cube {
  position: relative;

  .cube {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 100px;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateX(-33.5deg);

    li {
      position: absolute;
      width: 300px;
      height: 100px;
      background: linear-gradient(90deg, rgba(156, 39, 176, .3), rgba(255, 34, 109, .8) 70%, rgba(255, 255, 255, .6) 70%, rgba(255, 255, 255, .6));
    }
    .top {
      transform: rotateX(90deg) translateZ(50px);
    }
    .bottom {
      transform: rotateX(-90deg) translateZ(50px);
    }
    .front {
      transform: translateZ(50px);
    }
    .back {
      transform: rotateX(-180deg) translateZ(50px);
    }
  }
}

We can get a very cool 3D progress bar effect:

Use CSS Property to animate the 3D progress bar

Of course, the progress bar, it needs a filling animation. Since we are using the gradual progress of the progress bar, we need to control the color percentage change.

Normally, CSS does not support gradual animation, but this is not difficult for us, because we can use CSS @Property.

Simply modify the code:

@property --per {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.demo-cube .cube {
  .top,
  .front,
  .bottom,
  .back {
    background: linear-gradient(90deg, rgba(255, 217, 34, .6), rgba(255, 34, 109, .8) var(--per), rgba(255, 34, 109, .1) var(--per), rgba(255, 34, 109, .1));
    animation: perChange 6s infinite;
  }
}

@keyframes perChange {
  0% {
    --per: 0%;
  }
  90%,
  to {
    --per: 80%;
  }
}

In this way, we have realized a dynamic 3D progress bar, only need to control the --per CSS custom properties, the effect is as follows:

For those who don't know much about CSS @Property, you can read this article by the author- CSS @property, Make the Impossible , its appearance, let CSS greatly improve the ability to make various animations.

For the complete code above, you can hit here: CSS Inspiration-3D Cube Progress Bar

Extension

This article introduces the use of HTML/CSS to gradually build a progress bar from simple to complex, and gradually deepens the difficulty.

Of course, as the difficulty increases, you get a cooler progress bar.

Based on the above method introduction, we can basically evolve various progress bars we need. For example, based on the above method, a simple battery charging animation can be realized:

Of course, CSS is ever-changing, and the types of progress bars are certainly not limited to the above-mentioned categories. For example, we can use the filter to realize the charging animation of a Huawei mobile phone, which is also a way to present a progress bar, and it can also be implemented using pure CSS:

The complete realization of the above effects can be stamped - Use CSS to achieve cool charging animation

Or, we can make a fuss on the texture of the progress bar:

The effect comes from CodePen - Bars By Lucagaz .

All in all, the beautiful world of CSS is worth exploring.

finally

Okay, this concludes this article, I hope this article is helpful to you :)

Want to get the most interesting CSS information, don’t miss my account - 161834cc0cded4 iCSS front-end interesting 161834cc0cded7 😄

More wonderful CSS technical articles are summarized in my Github - iCSS , which is updated continuously. Welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can exchange more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.