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

This article mainly introduces css how to achieve water column loading effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

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...

Thank you for reading this article carefully. I hope the article "how to achieve the water column loading effect of css" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you 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.