css如何实现内嵌加载效果

这篇文章将为大家详细讲解有关css如何实现内嵌加载效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

内嵌加载

这名字起得有些不贴切，不过不重要，读者看图自然理解。

.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 100% 0 0;  border-radius: inherit;  background: #514b82;  animation:p6 2s infinite;}@keyframes p6 {    100% {inset:0}}

inset:0 100% 0 0; 右边内缩 100%，所以在 keyframes 部分需要将 inset 设置为 0。

关于"css如何实现内嵌加载效果"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。