加载动画 · Soft Donkey

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

[hidecontent type="vip1"]

<div class="loader">
  <div class="light"></div>
  <div class="black_overlay"></div>
</div>

<style>
/* From Uiverse.io by Smit-Prajapati  - Tags: blue, loader, light, neon */
.loader {
  height: 2px;
  width: 300px;
  background: rgb(44, 44, 44);
  position: relative;
  overflow: hidden;
}
.loader .black_overlay {
  background: linear-gradient(
    87deg,
    rgb(0, 0, 0) 0%,
    rgba(0, 0, 0, 0.14) 30%,
    rgba(0, 0, 0, 0.14) 70%,
    rgb(0, 0, 0) 100%
  );
  position: absolute;
  inset: 0px;
}
.loader .light {
  width: 70px;
  height: 100%;
  position: absolute;
  left: -20%;
  top: 0px;
  background: linear-gradient(
    87deg,
    rgba(0, 0, 0, 0) 0%,
    rgb(0, 204, 255) 40%,
    rgb(0, 204, 255) 60%,
    rgba(0, 0, 0, 0) 100%
  );
  animation: light 2s infinite ease-in-out;
}

@keyframes light {
  from {
    left: -30%;
  }
  to {
    left: 100%;
  }
}

</style>
    

[/hidecontent]