加载动画 · Ugly Octopus

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

[hidecontent type="vip1"]

<div class="loader">
  <span style="--i:1px" class="load"></span>
  <span style="--i:2px" class="load"></span>
  <span style="--i:3px" class="load"></span>
  <span style="--i:4px" class="load"></span>
  <span style="--i:5px" class="load"></span>
  <span style="--i:6px" class="load"></span>
  <span style="--i:7px" class="load"></span>
  <span style="--i:8px" class="load"></span>
  <span style="--i:9px" class="load"></span>
  <span style="--i:10px" class="load"></span>
</div>

<style>
/* From Uiverse.io by escannord  - Tags: animation, loader, spinner */
.loader {
  position: relative;
}
.load {
  display: inline-block;
  height: calc(var(--i) * 15);
  width: calc(var(--i) * 15);
  background-color: transparent;
  position: absolute;
  border: 5px rgb(47, 0, 255) solid;
  border-top: none;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: turn 2s infinite linear;
}

.load:nth-child(odd) {
  animation: turn 2s infinite linear reverse;
}

@keyframes turn {
  100% {
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}

</style>
    

[/hidecontent]