How to realize the effect of embedded loading with css

This article will explain in detail how to achieve the embedded loading effect of css. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

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.

This is the end of this article on "how to achieve embedded loading effect in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.