加载动画 · Ugly Zebra

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

[hidecontent type="vip1"]

<div class="loader"></div>
<style>
/* From Uiverse.io by Juanes200122 - Tags: simple, animation, loader, circle, html, css */
.loader {
  width: 15px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #000;
  box-shadow: -20px 0px,20px 0px;
  animation: l18 1s infinite;
}

@keyframes l18 {
 
  25% {
    box-shadow: -20px -20px, 20px 20px
  }

  50% {
    box-shadow: 0px -20px,  0px 20px
  }

  75% {
    box-shadow: 20px -20px,-20px 20px
  }

  100% {
    box-shadow: 20px   0px,-20px  0px
  }
}
</style>

[/hidecontent]