加载动画 · Young Bat

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

[hidecontent type="vip1"]

<div class="loader">
  <div class="square-1 square"></div>
  <div class="square-2 square"></div>
</div>
<style>
/* From Uiverse.io by csozidev - Tags: loader */
/* Discord loader made by: csozi | Website: www.csozi.hu*/

.loader {
  position: relative;
  height: 60px;
  width: 60px;
  box-sizing: content-box;
  padding: 10px;
}

.square {
  background-color: #7289DA;
  height: 20px;
  width: 20px;
  position: absolute;
}

.square-1 {
  animation: load 2s infinite;
}

.square-2 {
  animation: load 2s infinite;
  animation-delay: 1s;
}

@keyframes load {
  0% {
    translate: 0px 0px;
    scale: 1;
    rotate: 0deg;
  }

  25% {
    translate: 40px 0px;
    scale: 0.5;
    rotate: -90deg;
  }

  50% {
    translate: 40px 40px;
    scale: 1;
    rotate: 180deg;
  }

  75% {
    translate: 0px 40px;
    scale: 0.5;
    rotate: 90deg;
  }
}
</style>

[/hidecontent]