motionsites中文站 / 加载动画 · Tiny Quail
加载动画 · Tiny Quail
aadmin2026-09-19 发布组件0 阅读

加载动画 · Tiny Quail

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

[hidecontent type="vip1"]
<!-- From Uiverse.io by SmookyDev - Tags: animation, loader, circle loader, effect loader, loading animation, tailwind -->
<div
  class="w-32 aspect-square rounded-full relative flex justify-center items-center animate-[spin_3s_linear_infinite] z-40 bg-[conic-gradient(white_0deg,white_300deg,transparent_270deg,transparent_360deg)] before:animate-[spin_2s_linear_infinite] before:absolute before:w-[60%] before:aspect-square before:rounded-full before:z-[80] before:bg-[conic-gradient(white_0deg,white_270deg,transparent_180deg,transparent_360deg)] after:absolute after:w-3/4 after:aspect-square after:rounded-full after:z-[60] after:animate-[spin_3s_linear_infinite] after:bg-[conic-gradient(#065f46_0deg,#065f46_180deg,transparent_180deg,transparent_360deg)]"
>
  <span
    class="absolute w-[85%] aspect-square rounded-full z-[60] animate-[spin_5s_linear_infinite] bg-[conic-gradient(#34d399_0deg,#34d399_180deg,transparent_180deg,transparent_360deg)]"
  >
  </span>
</div>


[/hidecontent]
← 返回首页