加载动画 · Yellow Panther

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

[hidecontent type="vip1"]

<div class="loader">
    <div></div>
</div>
<style>
/* From Uiverse.io by gagan-gv - Tags: animation, progress, loader, smooth */
.loader {
  width: 12em;
  height: 1em;
  border-radius: 8px;
  background-color: #47a7ff44;
}

.loader div {
  height: 100%;
  width: 100%;
  border-radius: 8px;
  background-color: #47a7ff;
  animation: width7435 5s linear infinite;
  transition: all;
}

@keyframes width7435 {
  from {
    /*width: 0;*/
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}
</style>

[/hidecontent]