加载动画 · Silent Husky

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

[hidecontent type="vip1"]

<div class="container">
  <div class="loader"></div>
</div>
<style>
/* From Uiverse.io by NlghtM4re - Tags: green, progress, progress bar, loader, shadow, download, neon, bars */
.loader {
  width: 60%;
  height: 10px;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
}

.loader::before {
  content: "";
  position: absolute;
  background-color: rgb(9, 188, 9);
  width: 0%;
  height: 100%;
  border-radius: 2px;
  animation: load 3.5s ease-in-out infinite;
  box-shadow: rgb(9, 188, 9) 0px 2px 29px 0px;
}

.container {
  display: flex;
  justify-content: center;
}

@keyframes load {
  50% {
    width: 100%;
  }

  100% {
    right: 0;
    left: unset;
  }
}
</style>

[/hidecontent]