加载动画 · Tough Seahorse

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

[hidecontent type="vip1"]

<div class="custom-loader"></div>

<style>
/* From Uiverse.io by adilsarfraz02  - Tags: loader, spinner, smooth, custom, transition, effect loader, loading animation */
.custom-loader {
  width: 40px;
  height: 10px;
  color: #f000b4;
  background: radial-gradient(farthest-side, currentColor 90%, #0000) left /
      10px 10px,
    radial-gradient(farthest-side, currentColor 90%, #0000) center/10px 10px,
    radial-gradient(farthest-side, currentColor 90%, #0000) right / 10px 10px,
    linear-gradient(currentColor 0 0) center/100% 4px;
  background-repeat: no-repeat;
  position: relative;
  animation: s6 2s infinite linear;
}
.custom-loader:before,
.custom-loader:after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  animation: inherit;
  --s: calc(50% - 5px);
  animation-direction: reverse;
}
.custom-loader:after {
  --s: calc(5px - 50%);
}

@keyframes s6 {
  0% {
    transform: translate(var(--s, 0)) rotate(0);
  }
  100% {
    transform: translate(var(--s, 0)) rotate(1turn);
  }
}

</style>
    

[/hidecontent]