css如何实现内嵌加载效果

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

内嵌加载

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

<div class="progress-6"></div>

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