How to Make a Loading Animation for a Video or Website

Step by step

1. 1

   Choose what the wait looks like

   Spinner Arc is the familiar option when you do not know how long the wait will be. Progress Pill fills to 100 percent with a live number, so it suits a video scene with a clear start and end. Skeleton Shimmer mimics a loading content card for app and website mockups.

2. 2

   Match it to the interface

   All five presets have Primary, Secondary, Scale, Thickness and Position. Primary and Secondary set its two colors, which you can pick from your interface. Progress Pill also has Font, Text color and Easing for its percentage label. Scale sizes the whole graphic, so you can match the page element it replaces.

3. 3

   Let the clip repeat

   Defaults run from 1.5 to 3 seconds, and clips can go up to 60. Spinner Arc and Dots Bounce are made to repeat, so a short clip is enough. Progress Pill runs once to full, so set Duration to the wait you are showing. A 1:1 frame suits a small on-page element.

4. 4

   Use WebM with alpha on the web

   All presets start on a dark background, so set Background to Transparent if the loader sits on a page or footage. WebM with alpha plays over any background in a web page and works in CapCut too. Premiere Pro and After Effects need a PNG sequence.

5. 5

   Put it on the page

   On a website, add the WebM in a video element with autoplay, loop, muted and playsinline attributes, and it plays over whatever color is behind it. In After Effects, import the PNG sequence with File > Import to mock up the wait in a product demo.

Where it is used

• App and website prototypes

  A spinner or shimmering placeholder plays in a product demo, so a mockup shows a realistic wait state and the team can judge how the screen feels before anything is built.

• Comedy and tension beats

  A slow progress bar fills during a joke or a tense scene in a sketch or story video, using a wait everyone recognizes as the punchline.

• Tech explainers and live indicators

  Pulsing rings show that a scan or connection is running in a software explainer, or that something is live, so the viewer understands the state without being told.

Presets

5

Default duration

1.5 to 3 seconds, up to 60

Default background

Dark solid, can be set to Transparent

Best export

WebM with alpha for the web

Which format should you export?

Transparent WebM everywhere: over a product demo, and on the web, where an alpha WebM in a video tag weighs a fraction of the same loop as a GIF.

Format

MP4 · WebM · PNG sequence

Alpha

WebM or PNG sequence

Resolution

720p to 8K

Aspect

16:9 · 9:16 · 1:1 · 4:5

License

Commercial use included

Three tips that make it look intentional

• Loop seamlessly rather than exporting a long clip.
• Use your product accent color so the wait still feels branded.
• Skeleton shimmers suit content that will appear; spinners suit actions.

Three things people get wrong

• Using a determinate progress bar for an indeterminate wait, which promises a finish line you cannot see.
• Making the loop long enough to notice. A spinner that takes two seconds to come round feels broken.
• Exporting at the size it will be displayed. Render bigger; a scaled-down spinner stays crisp.

Frequently asked