加载动画 · Dull Cheetah

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

[hidecontent type="vip1"]

<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
  width: 48px;
  height: 48px;
  display: flex;
  transform-origin: 50% 125%;
  animation: mov-y 1s infinite linear;
}

.loader:before,
      .loader:after {
  content: "";
  flex: 1;
  background: #fff;
  transform-origin: 0% 100%;
  animation: rtr-x 1s infinite linear;
}

.loader:before {
  transform-origin: 100% 100%;
  animation-name: rtr-rx;
}

@keyframes mov-y {
  0%,25% {
    transform: translateY(0)     scaleY(1)
  }

  49% {
    transform: translateY(-75%)  scaleY(1)
  }

  50% {
    transform: translateY(-75%)  scaleY(-1)
  }

  75%,100% {
    transform: translateY(-150%) scaleY(-1)
  }
}

@keyframes rtr-x {
  25%,75% {
    transform: rotate(0deg)
  }

  50% {
    transform: rotate(90deg)
  }
}

@keyframes rtr-rx {
  25%,75% {
    transform: rotate(0deg)
  }

  50% {
    transform: rotate(-90deg)
  }
}
    
</style>

[/hidecontent]