Six lightweight loading indicators in pure CSS. Each has a reduced motion fallback, and one variable changes the colour of all of them.
Make me a set of six loading animations using only HTML and CSS. Brand colour: [HEX CODE] Where they'll be used: [e.g. buttons, full page, inside cards] What I need: - 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), sized in `em` so it scales with the font size. - The colour comes from a single custom property, `--loader`. - Only animate `transform` and `opacity`, so they stay smooth on slow devices. - Add a `prefers-reduced-motion` fallback that swaps the movement for a gentle fade. - Give every loader `role="status"` and a visually hidden "Loading" label. Put all six in one HTML file, in a grid, with the class name under each.
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. Claude Prompts is a fan project and is not affiliated with Anthropic.
Anything that waits for data needs a loader: a button that submits, a card that fills in, a page that changes. A CSS loader keeps working while your scripts are still downloading, which is exactly the moment you need it.
Give it your real brand colour. Every loader reads it from the --loader property, so later you can change it in one place. Say where they'll live, because a loader inside a button has to be a lot smaller and calmer than one that fills the page. A version for light backgrounds, or a slower set for long waits, is an easy follow-up.
Keep the reduced motion fallback. Spinning and bouncing makes some people dizzy, and the fallback is three lines. Test on a slow phone as well. Animations that stick to transform and opacity stay smooth, while anything that animates width, height or box-shadow will stutter. And leave the hidden "Loading" label in, so screen readers announce the wait.
Use the copy button above. The full text is included, nothing is cut off.
Everything highlighted in yellow is a placeholder. Swap it for your own topic, audience or data.
If the result helped, press the heart. Votes decide which prompts make the weekly top 10.
Give Claude one statistic and its context, and get a short animated visual in HTML that builds the number up step by step instead of just showing it.
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...
Paste a file tree and a few key files and get the tour a senior engineer would give you: how a request flows, where things live, what to avoid.
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...
Stops Claude from patching symptoms. It ranks the likely causes, tells you what to check first, and only then writes the fix.
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.
None of these cause an error message. They just make every answer a little worse. Here is how to spot each one and what to write instead.