加载动画 · Swift Hound

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

[hidecontent type="vip1"]

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

<style>
/* From Uiverse.io by choudhary-usman  - Tags: simple, material design, icon, animation, loader, animated */
.loader {
  --s: 15px;
  width: calc(var(--s) * 2.33);
  aspect-ratio: 1;
  display: flex;
  justify-content: space-between;
}
.loader::before,
.loader::after {
  content: "";
  width: var(--s);
  --_g: no-repeat radial-gradient(farthest-side, #000 94%, #0000);
  background: var(--_g) top, var(--_g) bottom;
  background-size: 100% var(--s);
  transform-origin: 50% calc(100% - var(--s) / 2);
  animation: l30 1s infinite;
}
.loader::after {
  transform-origin: 50% calc(var(--s) / 2);
}
@keyframes l30 {
  70%,
  100% {
    transform: rotate(-270deg);
  }
}

</style>
    

[/hidecontent]