How to realize the step-by-step loading effect of css

This article mainly introduces css how to achieve step-by-step 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 Xiaobian take you to understand.

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%

Thank you for reading this article carefully. I hope the article "how to achieve step-by-step 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!