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

This article introduces the relevant knowledge of "how to use css to achieve dynamic arc line length change Loading animation", in the actual case operation process, many people will encounter such a dilemma, and then let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

A group of friends asked me how to use CSS to achieve the following Loading effects:

This is a very interesting question.

We know that with CSS, we can easily achieve an animation like this:

Div {width: 100px; height: 100px; border-radius: 50%; border: 2px solid transparent; border-top: 2px solid # 000; border-left: 2px solid # 000; animation: rotate 3s infinite linear;} @ keyframes rotate {100% {transform: rotate (360deg);}}

The animation is as follows:

Compared with the required line loading animation, the core point missing from the above animation is:

In the process of rotation, the length of the line will change.

Therefore, the difficulty here is how to dynamically change the length of the arc segment. Solved this problem, also basically solved the above line transformation Loading animation.

This article will introduce several interesting ways in CSS that may change the length of arc lines dynamically:

Method 1: use a mask to implement

The first method, which is also relatively easy to think of, is implemented by masking.

We realize two semicircular lines, one is the color that can actually be seen, and the other is the same as the background color, relatively thicker semicircle line, when the two lines move at different rates, we can see the dynamic arc line.

If you look at the schematic diagram, you can see:

We replace the above red lines with white background, and the overall animation effect is very similar. The pseudo code is as follows:

Div {width: 200px; height: 200px;} div::before {position: absolute; content: "; top: 0px; left: 0px; right: 0px; bottom: 0px; border-radius: 50%; border: 3px solid transparent; border-top: 3px solid # 000; border-left: 3px solid # 000; animation: rotate 3s infinite ease-out;} div::after {position: absolute; content:"; top:-2px Left:-2px; right:-2px; bottom:-2px; border-radius: 50%; border: 7px solid transparent; border-bottom: 7px solid # fff; border-right: 7px solid # fff; animation: rotate 4s infinite ease-in-out;} @ keyframes rotate {100% {transform: rotate (0deg);}}

The core is to achieve two semicircular lines, one black and one background color, and the two lines move at different rates (controlled by animation time and ease). The effects are as follows:

Complete code you can hit-- CodePen Demo-Linear Loading

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

The two biggest problems of the above proposal are:

If the background color is not solid, it will be exposed.

If the length of the line segment that can be displayed is greater than half a circle, it cannot be completed.

Based on this, we can only find another way.

Method 2: make use of the stroke-* ability of SVG

In many previous articles, we have mentioned that with CSS and SVG, we can achieve a variety of simple or complex line animation, such as simple:

Or customize the complex line animation of a complex path:

> those who are interested in line animation in CSS/SVG, but don't know much about it, can take a look at my article-- [Web Animation] introduction to SVG Line Animation.

Here, we only need a simple SVG tag with its CSS style stroke-dasharray and stroke-dashoffset to easily achieve the above effect:

Width: 100px; height: 100px; animation: rotate 2s linear infinite;}. Path {stroke-dasharray: 1,200; stroke-dashoffset: 0; stroke: # 000; animation: dash 1.5s ease-in-out infinite} @ keyframes rotate {100% {transform: rotate (360deg);}} @ keyframes dash {0% {stroke-dasharray: 1200; stroke-dashoffset: 0;} 50% {stroke-dasharray: 89,200 Stroke-dashoffset:-35px;} 100% {stroke-dasharray: 89,200; stroke-dashoffset:-124px;}}

A brief explanation:

Stroke: sets the border color for svg graphics by analogy to border-color in css

Stroke-dasharray: the value is an array with no upper limit. Each number alternately indicates the width of the underscore and the interval.

The distance from the stroke-dashoffset:dash mode to the beginning of the path.

We use stroke-dasharray to cut the original complete line into multiple segments, assuming that stroke-dasharray: 10, 10 represents such a figure:

The first 10 represents the length of the segment, and the second 10 represents the gap between the two visible segments.

The stroke-dasharray: 1200 in the actual code means that there is an interval of 200px between the two 1px segments. Since the circumference of the circle of diameter 40px is 40 * π ≈ 125.6px, which is less than 200, there is only one point as shown in the figure:

By the same token, stroke-dasharray: 89,200 means:

With animation, the segments are tweened between the two states. The role of stroke-dashoffset is to move the segment forward, in conjunction with the parent container's transform: rotate () rotation animation, so that the visual effect, the segment is always rotating in one direction. The results are as follows:

For the complete code, you can stamp here: CodePen Demo-- Linear loading

Https://codepen.io/Chokcoco/pen/jOGQGJP?editors=1100

OK, and some students will say, I don't want to introduce SVG tags, I just want to use pure CSS scheme. There is also a pure CSS scheme that makes use of CSS @ property.

Method 3: use CSS @ property to get conic-gradient moving

Here we need to make use of the ability of CSS @ property to make the angular gradient which is impossible to achieve the animation effect to move.

Normally, gradients cannot be animated, as follows:

.normal {width: 200px; height: 200px; border-radius: 50%; background: conic-gradient (yellowgreen, yellowgreen 25%, transparent 25%, transparent 100%); transition: background 300ms; &: hover {background: conic-gradient (yellowgreen, yellowgreen 60%, transparent 60.1%, transparent 100%);}}

You will get the effect that because conic-gradient does not support transition animation, you will get a direct change from one frame to another:

OK, modify it with the custom variable CSS @ property:

Property-- per {syntax:'; inherits: false; initial-value: 25%;} div {background: conic-gradient (yellowgreen, yellowgreen var (--per), transparent var (--per), transparent 100%); transition:-- per 300ms linear; &: hover {--per: 60%;}}

Take a look at the effect of the transformation:

Here, we can make the gradual change move dynamically, giving the ability of animation.

We only need to introduce mask and cut off the middle part to realize the above line Loading animation. The pseudo code is as follows:

Property-- per {syntax: "; inherits: false; initial-value: 10%;} div {position: relative; width: 100px; height: 100px; border-radius: 50%; animation: rotate 11s infinite ease-in-out; &:: before {content:"; position: absolute; top: 0; left: 0; right: 0; bottom: 0 Border-radius: 50%; background: conic-gradient (transparent, transparent var (--per), # fa7 var (--per), # fa7); mask: radial-gradient (transparent, transparent 47.5px, # 000 48px, # 000); animation: change 3s infinite cubic-bezier (0.57,0.29,0.49,0.76);}} @ keyframes change {50 {transform: rotate (270deg) -- per: 98%;} 100% {transform: rotate (720deg);}} @ keyframes rotate {100% {transform: rotate (360deg); filter: hue-rotate (360deg);}}

Here, by the way, I added filter: hue-rotate () to change the color as the line rotates, and the final effect is as follows, which is a pure CSS solution:

"how to use css to achieve dynamic arc line length change of Loading animation" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.