Skip to content

5 icons · MIT licensed

Animated loading icons

Spinners and loaders that loop for as long as something is in progress. Put one inside a submit button while a request runs, in place of content that is still loading, or on a full-screen splash; they hold still when the user prefers reduced motion.

All 5 icons loop continuously. Each one comes as a React component, a shadcn/ui component and a Lottie JSON animation, and 2 of them also as static SVGs, free for commercial use under the MIT license.

All loading icons

Where to use them

  • Submit buttons waiting on a request
  • Placeholders while a list or chart loads
  • Infinite scroll and load-more indicators
  • Full-screen splash and route transitions
  • File upload and processing progress

By interaction

  • Looping animated icons · 5

    Plays continuously; stays on the static first frame when reduced motion is preferred. Infinity, Loading circular, Loading V2, Loading V3, Loading V4.

Add one to your app

With React, install react-useanimations and import the icon; it plays its loop interaction on its own. Every icon in this category works the same way: swap loading for the name on its page.

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

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

With shadcn/ui, the CLI adds a ready-made component:

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

<AnimatedLoading size={24} />

Not using React? Each icon is a Lottie JSON file at /icons/<id>.json; see Lottie icons for web, iOS, Android and Flutter players.

FAQ

Which animated loading icons are included?

5 icons: Infinity, Loading circular, Loading V2, Loading V3 and Loading V4. All of them are free for personal and commercial projects under the MIT license, with no attribution required.

How do I use these animated loading icons in React?

Install react-useanimations, add import loading from 'react-useanimations/lib/loading' and render <UseAnimations animation={loading} size={32} />. The icon plays its loop interaction and follows the text color. With shadcn/ui, run npx shadcn@latest add https://useanimations.com/r/loading.json instead.

Can I use these animated loading icons without React?

Yes. Each icon is a Lottie JSON file at https://useanimations.com/icons/<id>.json (for example https://useanimations.com/icons/loading.json), playable with lottie-web, lottie-ios, lottie-android or Flutter's lottie package; static SVGs are on each icon page. None of them use expressions, so lottie-web's light build is enough.