跳到主要内容
ZH

5 个图标 · MIT 许可

加载动画图标

只要任务还在进行，加载指示器和转圈动画就会一直循环。可以放在请求进行中的提交按钮里、尚未加载完的内容位置上，或者全屏启动页上；当用户偏好减少动态效果时，它们会保持静止。

全部 5 个图标都持续循环播放。每个图标都提供 React 组件、shadcn/ui 组件和 Lottie JSON 动画，其中 2 个还提供静态 SVG，可依据 MIT 许可证免费用于商业项目。

全部加载动画图标

适用场景

  • 等待请求返回的提交按钮
  • 列表或图表加载时的占位
  • 无限滚动和“加载更多”指示
  • 全屏启动页和路由切换
  • 文件上传和处理进度

按交互方式

  • 循环动态图标 · 5

    持续播放；当用户偏好减少动态效果时，停留在静态的第一帧。Infinity, Loading circular, Loading V2, Loading V3, Loading V4.

添加到您的应用

在 React 中，安装 react-useanimations 并导入图标即可，它会自动播放“循环”交互。本类别的所有图标用法都一样：把 loading 换成图标页面上的名称。

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import loading from 'react-useanimations/lib/loading';

<UseAnimations animation={loading} size={32} />

使用 shadcn/ui 时，CLI 会添加一个现成的组件：

npx shadcn@latest add https://useanimations.com/r/loading.json
import { AnimatedLoading } from '@/components/animations/loading';

<AnimatedLoading size={24} />

没有使用 React？每个图标都是位于 /icons/<id>.json 的 Lottie JSON 文件；网页、iOS、Android 和 Flutter 的播放器用法请参阅 Lottie 图标。

常见问题

包含哪些加载动画图标？

共 5 个图标：Infinity、Loading circular、Loading V2、Loading V3 和 Loading V4。全部可依据 MIT 许可证免费用于个人和商业项目，无需署名。

如何在 React 中使用这些加载动画图标？

安装 react-useanimations，添加 import loading from 'react-useanimations/lib/loading'，然后渲染 <UseAnimations animation={loading} size={32} />。图标会播放它的“循环”交互，并跟随文字颜色。使用 shadcn/ui 时，改为运行 npx shadcn@latest add https://useanimations.com/r/loading.json。

不用 React 也能使用这些加载动画图标吗？

可以。每个图标都是一个 Lottie JSON 文件，地址为 https://useanimations.com/icons/<id>.json（例如 https://useanimations.com/icons/loading.json），可以用 lottie-web、lottie-ios、lottie-android 或 Flutter 的 lottie 包播放；静态 SVG 可以在各个图标页面（英文）下载。这些图标都没有用到表达式，因此 lottie-web 的轻量版（light build）就够用了。