加载动画 · Fresh Tiger

类型：组件　·　分类：加载动画　·　收录：2026-09-19　·　源码：会员可见

[hidecontent type="vip1"]

<div class="progress">
      <div class="inner"></div>
</div>
<style>
/* From Uiverse.io by sabbircoder07 - Tags: loader, animated, css3 */
.progress {
  background-color: #ffffff;
  width: 220px;
  height: 20px;
  border-radius: 100px;
  overflow: hidden;
  backface-visibility: hidden;
}

.inner {
  background-image: linear-gradient(to left, #00cdac, #00c2c9, #00b4e3, #00a2f1, #008cef, #0088eb, #0085e6, #0081e2, #0090de, #009bd2, #00a3c1, #02aab0);
  height: 100%;
  transform-origin: left;
  animation: progress 2s infinite;
}

@keyframes progress {
  0% {
    transform: scaleX(10%) translateX(-10%);
  }

  100% {
    transform: scaleX(80%) translateX(150%);
  }
}

</style>

[/hidecontent]