加载动画 · Young Dragonfly

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

[hidecontent type="vip1"]

<div class="loader"><i></i></div>

<style>
/* From Uiverse.io by Cksunandh  - Tags: simple, loader, html, css */
.loader i {
  display: block;
  width: 2px;
  height: 85px;
  margin-top: 18px;
  background-color: rgba(61, 61, 61, 0.5);
  overflow: hidden;
  position: relative;
}
.loader i:before {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #fafafa;
  position: absolute;
  top: 0;
  left: 0;
  animation: loader-animation 2s infinite normal;
}
@keyframes loader-animation {
  0% {
    transform: translate3d(0, -100%, 0);
  }
  15% {
    transform: translate3d(0, -98%, 0);
  }
  85% {
    transform: translate3d(0, 98%, 0);
  }
  100% {
    transform: translate3d(0, 100%, 0);
  }
}

</style>
    

[/hidecontent]