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

This article mainly shows you the "then use pure CSS to achieve the Loading effect", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "and then use pure CSS to achieve the Loading effect" this article.

In order to ensure normal operation, let me first make the following rules:

* {box-sizing: border-box;} 1. Smooth loading

.progress-1 {width:120px; height:20px; background: linear-gradient (# 00000) 0 no-repeat # ddd; animation:p1 2s infinite linear;} @ keyframes p1 {100% {background-size:100%}}

Linear-gradient (# 00000) you can understand as linear-gradient (# 000 0100%). If you are not already familiar with it, copy linear-gradient (# 000 050%, # f00 50%) and replace the original part for a run. If you find linear-gradient (# 000 00) awkward, just write # 000.

0: 0 is the abbreviation of background-position: 0: 0.

two。 Load step by step

Progress-2 {width:120px; height:20px; border-radius: 20px; background: linear-gradient (orange 00) 0 no-repeat lightblue; animation:p2 2s infinite steps (10); @ keyframes p2 {100% {background-size:110%}}

Steps (10) is the abbreviation of step (10, end), which indicates that there was no one at the beginning, so there is the second point to deal with.

100% {background-size:110%} the percentage of adding one more step. The above step is 10, so it is 100% + (1 + 10) * 100% = 110%

3. Fringe loading

.progress-3 {width:120px; height:20px; border-radius: 20px; background: repeating-linear-gradient (135degpenalty 03355 010pxmemffa5160 20px) 0 no-repeat 0 no-repeat, repeating-linear-gradient (135degdd 010px training eee 0 20px) 0Universe 100%; animation:p3 2s infinite;} @ keyframes p3 {100% {background-size:100%}}

Repeating-linear-gradient (135degdime DDD 010px no-repeat 0 20px) 0zag 100%; gray zebra stripes are drawn, and repeating-linear-gradient (135degdegery f03355 010px camera 5160 20px) 0deband 0% no-repeat is the stripes loaded by the progress bar.

4. Dotted line loading

.progress-4 {width:120px; height:20px;-webkit-mask:linear-gradient (90degPower00070% remark 00000) 0 background: linear-gradient (# 0000 0) 0 no-repeat # ddd; animation:p4 2s infinite steps (6); @ keyframes p4 {100% {background-size:120%}}

-webkit-mask has a value of repeat by default, otherwise there wouldn't be five masks.

5. Battery loading

Progress-5 {width:80px; height:40px; border:2px solid # 000; padding:3px; background: repeating-linear-gradient 0 no-repeat content-box content-box; position: relative; animation:p5 2s infinite steps (6);} .progress-5::before {content: "; position: absolute; top: 50%; left:100%; transform: translateY (- 50%); width:10px Height: 10px; border: 2px solid # 000;} @ keyframes P5 {100% {background-size:120%}}

The original author implements the. progress-5::before pseudo-elements as follows:

.progress-5::before {content: ""; position: absolute; top:-2px; bottom:-2px; left:100%; width:10px Background: linear-gradient (# 0000 calc (50%-7px), # 0000 calc (50%-5px), # 0000 0 calc (50% + 5px), # 0000 calc (50% + 7px), # 0000 0) left / 100%, linear-gradient (# 0000 calc (50%-5px), # 0000 0 calc (50% + 5px), # 0000) left / 2px 100%, linear-gradient (# 0000 calc (50-5px) # 0000 calc (50% + 5px), # 0000 0) right/2px 100 Background-repeat:no-repeat;}

# 0000 is transparent and equivalent to transparent

6. Embedded loading

The name is somewhat inappropriate, but it is not important. Readers will naturally understand it when they look at the picture.

Progress-6 {width:120px; height:22px; border-radius: 20px; color: # 514b82; border:2px solid; position: relative;}. Progress-6::before {content: "; position: absolute; margin:2px; inset:0 10000; border-radius: inherit; background: # 514b82; animation:p6 2s infinite;} @ keyframes p6 {100% {inset:0}}

Inset:0 is 100% inward on the right, so you need to set inset to 0 in the keyframes section.

7. Bead chain loading

Progress-7 {width:120px; height:24px;-webkit-mask: radial-gradient (circle closest-side,#000 94% 12px 0000) 00 / 25 100%, linear-gradient (# 0000 0) center/calc (100%-12px) calc (100%-12px) no-repeat; background: linear-gradient (# 25b09b 00) 0 no-repeat # ddd; animation:p7 2s infinite linear;} @ keyframes p7 {100% {background-size:100%}}

Mask-radial-gradient in webkit-mask is to divide the width into four equal parts, each drawing a circle with the edge of the smallest closest-side as the diameter.

8. Zebra crossing loading

.progress-8 {width:60px; height:60px; border-radius: 50%;-webkit-mask:linear-gradient (0deggradation 00055%) bottom/100% 18.18%; background: linear-gradient (# f0335500) bottom/100% 0% no-repeat # ddd; animation:p8 2s infinite steps (7); @ keyframes p8 {100% {background-size:100% 115}}

Adjust the angle depicted by linear-gradient, plus the mask.

9. Water column loading

.progress-9 {--R1: 154%;-- R2: 68.5%; width:60px; height:60px; border-radius: 50% Background: radial-gradient (var (--R1) var (--R2) at top, # 0000 79.5% center left, radial-gradient (var (--R1) var (--R2) at bottom,#269af2 79.5% center center, radial-gradient (var (--R1) var (--R2) at top, # 0000 79.5% focus 269af280% center right, # ccc; background-size: 50.5% 220% Background-position:-100% 0% 0% 0% background-repeat:no-repeat; animation:p9 100%; background-repeat:no-repeat; animation:p9 2s infinite linear } @ keyframes p9 {33% {background-position: 033%, 100% 33%, 200% 33%} 66% {background-position:-100% 66% Magi 0% 66%, 100% 66%} 100% {background-position: 0% 100% Magi 100% 100% Magi 200%}

Radial-gradient draws the waves in the horizontal plane, just three circles. Var (--R1) calls the defined attribute value directly. Skill get...

10. Signal loading

.progress-10 {width:120px; height:60px; border-radius:200px 200px 00;-webkit-mask:repeating-radial-gradient (farthest-side at bottom,# 0000 1px 12% no-repeat 0000 calc (12% + 1px) 20%); background: radial-gradient (farthest-side at bottom,#514b82 095% ddd; animation:p10 0000 0) bottom/0% 0 no-repeat # ddd; animation:p10 2s infinite steps (6) } @ keyframes p10 {100% {background-size:120% 120%}}

Use the repeating-radial-gradient method to draw a circular mask. Radial-gradient fills with a circular gradient from the bottom up.

The above is all the content of the article "then use pure CSS to achieve Loading effects". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.