Browse
Coding

Six CSS Loading Animations, No JavaScript

A small pack of lightweight loading indicators built with pure CSS, each with a reduced motion fallback and one variable to change the colour.

No votes yet this week
Output
Video + Text
Added

The prompt

Create a set of six loading animations using only HTML and CSS.

Brand colour: [HEX CODE]
Where they will be used: [e.g. buttons, full page, inside cards]

Requirements:
- Six different styles: bouncing dots, a ring spinner, equaliser bars, a soft pulse, orbiting dots and an indeterminate progress bar.
- Pure CSS animations. No JavaScript, no images, no libraries.
- Each loader is one element (pseudo-elements and a few child spans are fine) and is sized in `em`, so that it scales with the font size.
- Colour comes from a single custom property, `--loader`.
- Animate only `transform` and `opacity`, so that they stay smooth on slow devices.
- Add a `prefers-reduced-motion` fallback that replaces movement with a gentle fade.
- Give every loader `role="status"` and a visually hidden "Loading" label.

Deliver one HTML file that shows all six in a grid, with the class name under each.
  • css
  • animation
  • ui

What it generates

2 examples
[01] Main example
[02] Text

All six loaders in one file, about 3 KB of CSS in total. Every animation runs on transform and opacity only, and takes its colour from --loader.

NoteThis is an example. Results change between runs and model versions. Prompt Podium is a fan project and is not affiliated with Anthropic.

Getting the most from this prompt

When to use it

Any interface that waits for data: buttons that submit, cards that load, full page transitions. Pure CSS loaders need no JavaScript, so they keep working while your scripts are still loading, which is exactly when you need them.

Make it your own

  • Give your real brand colour. Every loader reads it from the single --loader property, so you can change it later in one place.
  • Say where the loaders will be used. A loader inside a button has to be much smaller and calmer than one that fills the page.
  • Ask for a light background version, or for a slower, calmer set for longer waits.

Watch out for

Keep the reduced motion fallback. Some people get dizzy from spinning and bouncing, and the fallback costs three lines. Test on a slow phone: animations that only use transform and opacity stay smooth, while anything that animates width, height or box-shadow will stutter. Keep the hidden "Loading" label so that screen readers announce the wait.

How to use this prompt

  1. [01] Copy

    Copy the prompt

    Use the copy button above. The full text is included, nothing is cut off.

  2. [02] Fill in

    Replace the yellow parts

    Everything highlighted in yellow is a placeholder. Swap it for your own topic, audience or data.

  3. [03] Vote

    Run it in Claude and vote

    If the result helped, press the heart. Votes decide which prompts make the weekly top 10.

More like this

All coding prompts
Text output

In one paragraph. This is a bookings app for small gyms. A React front end talks to an Express API in /server. Data lives in Postgres and is accessed through Prisma. Anything slow (emails, PDF invoices) goes through a job...

First Day Codebase Tour

Paste a file tree and a few key files. Claude gives you the tour a senior engineer would: how a request flows, where things live and what to avoid.

Text output

What the error means. Cannot read properties of undefined (reading 'map') means orders was undefined at the moment the component rendered. The array never arrived, or it arrived under a different name. Most likely causes 1...

Find the Bug Before You Fix It

Stop Claude from patching symptoms. This prompt makes it rank the likely causes, tell you what to check first, and only then write the fix.

Image outputA landing page hero for a parcel tracking app, with a bold headline, a signup button and an illustrated parcel card

One File Landing Page Hero

Get a complete, responsive hero section in a single HTML file with no frameworks and no images, ready to paste into any site or use as a starting point.

Learn the technique

All articles
2 min read

How to Use XML Tags in Claude Prompts

Wrapping parts of your prompt in simple tags is one of the easiest ways to get more reliable answers from Claude. A practical guide with examples.