Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the ways of creating all kinds of progress bars in pure CSS?" interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what are the ways of creating all kinds of progress bars in pure CSS?"

HTML tag-- meter & progress

This may be something that some students are not quite clear about. HTML5 natively provides two tags and to implement the progress bar.

Used to display scalar or fractional values in a known range

Used to show the progress of the completion of a task, which is usually displayed as a progress bar

Let's take a look at it separately. The first is the label:

Degree of completion: 350 degrees

Meter {width: 200px;}

The style is as follows:

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

Coincidentally, let's take a look at the use of tags:

Degree of completion: 70%

Progress {width: 200px;}

The style is as follows:

Where the max attribute describes the total amount of work required for the task represented by the progress element, and the value attribute is used to specify the amount of work that has been completed by the progress bar.

The difference between meter and progress

So the question is, from the above Demo, the effect of the two tags is exactly the same, so what is the difference between them? Why are there two seemingly identical labels?

The biggest difference between the two elements lies in the semantic difference.

Represents a scalar measured or fractional value within a known range

Indicates the progress of the completion of the task

For example, the current completion of a requirement should be used, while if you want to display the current speed value of the car dashboard, you should use meter.

Limitations of meter & progress

Of course, in the actual business requirements, or production environment, you will hardly see and label.

The reason is:

We cannot effectively modify and label the style, such as background color, progress front color, etc. And, most fatally, the default style of browsers is not consistent between browsers. This is a catastrophic disadvantage for a business that pursues stability and consistent UI performance!

We can't add some animation and interaction to him, because in some practical application scenarios, it's definitely not just a progress bar.

Using CSS to realize Progress Bar

Therefore, at this stage, it is more common to use some CSS methods to implement the progress bar.

Use percentage to achieve progress bar

One of the most common ways is to use the percentage of the background color to make a progress bar.

The simplest DEMO:

.g-container {width: 240px; height: 25px; border-radius: 25px; background: # eee;}. G-progress {width: 50%; height: inherit; border-radius: 25px 0025px; 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 transferred to the CSS.

Fill in the full width value with the HTML style attribute, such as

Or use CSS to customize properties

Cooperate with width: var (--progress) in the actual CSS

Complete custom style, and can easily add auxiliary rich animation and interactive effects

For example, add a transition effect to g-progress:

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

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

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

Single tags are implemented using gradients

Of course, you can see that what we use above is the structure of two tags:

Be stingy, we can also do this with just one tag, mainly with the help of gradients:

.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 complete background value of the HTML style attribute to pass the actual percentage, of course, it is recommended to use the CSS custom attribute to pass the value:

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

Students who are familiar with CSS will find that one drawback of this current approach is that when changing the value of-- progress, even if you add transition to the. g-progress, there will be no transition animation.

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

So, here, in order to achieve animation, we can modify our code with the help of CSS @ property:

@ property-- progress {syntax:'; 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 feature of CSS @ property, we can also achieve animation under a single tag:

CodePen Demo-the progress bar effect of a single tag

Https://codepen.io/pen/

Of course, it is not just the percentage and gradual change mentioned above that can achieve this kind of most common progress bar, but all that can achieve length change can actually be used to implement the progress bar, including but not limited to:

Width (using a percentage of the width is more direct)

Gradient (the value that controls the percentage of the blend point of the gradient)

Gradual background-size

Transfrom: scale () (zooming can also change the width size)

Clip-path for cropping

.. (wait, etc.)

There is no more unfolding here.

Arc progress bar

Of course, progress bars can't 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 an arc-shaped progress bar, similar to this:

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

. 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 implement such a pie chart:

Then there is the hollowed-out middle part.

The traditional idea is to stack a circle in the middle. However, one of the biggest drawbacks of this is that if our background is not a solid color but a gradient, it will not apply, such as this:

So how to hollow out the middle so that the middle part is transparent? Here we can skillfully achieve this through the 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 easily hollowed out the middle, even if the background is not solid color.

CodePen Demo-Angle gradual change to realize Arc Progress Bar

Https://codepen.io/Chokcoco/pen/oNewMLy

Based on this extension, a multicolor arc progress bar can also be realized:

. g-progress {width: 160px; height: 160px; border-radius: 50%; mask: radial-gradient (transparent, transparent 50%, # 00051%, # 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 be less like a progress bar and more like a pie chart?

The limitation of arc progress bar realized by angular gradual change

Of course, this approach has two drawbacks.

Of course, when the progress percentage is not similar to numbers such as 0 °, 90 °, 180 °, 270 °, 360 °, when angular gradient is used, there will be obvious aliasing at the connection between different colors.

For example, conic-gradient (# FFCDB2 0, # FFCDB2 27%, # B5838D 27%, # B5838D):

The solution to this kind of problem is to leave some gradient space at the connection, and we simply modify the above angular gradient code:

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

Take a closer look at the above code and change a change from 27% to 27% to 27% to 27.2%. The extra 0.2% is to eliminate aliasing. The actual effect of the change:

For the specific use, you can debug and select a range that will not only not see the blur, but also eliminate aliasing as much as possible.

It is more troublesome to implement arc progress bars that require circles at the beginning and end.

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

Of course, this situation, of course, the progress bar color is solid color can also be solved, we can achieve this effect by adding two small circles at the beginning and end.

If the progress bar is graded, it needs to be implemented with the help of SVG/Canvas.

For the above complete arc progress bar with rounded corners, you can see the complete source code-- CodePen Demo-- the arc progress bar with a circular beginning and end.

Https://codepen.io/Chokcoco/pen/VwzzVEV

Spherical progress bar

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

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

This technique should be familiar to everyone by now, so I won't repeat it too much. a picture is worth a thousand words, and you can use a scrolling circle, similar to this:

If you apply overflow: hidden to the container, you can get this effect:

If you don't understand this technique, you can slam this article:

Pure CSS to achieve wave effect!

Https://github.com/chokcoco/iCSS/issues/22

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

The complete code is roughly as follows:

.container {width: 200px; height: 200px; border: 5px solid rgb (11818,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 (1188255); border-radius: 50%;} p {position: absolute; top: 50%; left: 50%; transform: translate (- 50%,-50%); font-size: 36px; color: # 000; z-index: 10;} @ keyframes rotate {transform: translate (- 50%,-70%) rotate (360deg) } @ keyframes change {from {top: 80px;} to {top:-120px;}}

3D progress bar

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

You can take a look at this article-CSS 3D animation. How amazing animations can be made only with CSS?

Https://github.com/chokcoco/iCSS/issues/132

It is mainly with the help of a 3D cube. Next let's implement a cube progress bar.

First, implement a cube with the following structure:

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

Of course, we don't need so many faces, just 4 faces, remove the left and right sides, and then use the gradient to modify the color of each side of the cube and remove 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) Transform {transform: rotateX (- 180deg) translateZ (50px);}

We can get a very cool 3D progress bar:

Use CSS Property to animate 3D progress bar

Of course, the progress bar, it needs a fill animation. Since we are using the progress bar of the gradient implementation, we need to control the color percentage change in it.

Normally, CSS doesn't support gradual animation, but that doesn't bother us, because we can use CSS @ Property.

Simply modify the code:

@ property-- per {syntax:'; 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 implemented a moving 3D progress bar, which only needs to be controlled-- the custom attribute of per CSS. The effect is as follows:

For those who don't know much about CSS @ Property, you can take a look at the author's article-CSS @ property to make the impossible possible. The emergence of it has greatly improved CSS's ability to make all kinds of animation.

Expand and extend

From simplicity to complexity, this article introduces the way to build a progress bar step by step using HTML/CSS, and gradually deepens the difficulty.

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

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

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

The complete implementation of the above effects can be stamped-- skillfully using CSS to achieve cool charging animation.

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

At this point, I believe you have a deeper understanding of "pure CSS to create all kinds of progress bars". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.