Website elementsFeedback & states
Loading
A CSS loading animation, built into your site with no plugin and no library. Three ways to say “wait” in one element: an inline spinner with a name (role="status"), skeleton placeholders from CSS gradients (lines, avatar, card; aria-hidden), and a busy wrapper that, while data-busy is set, makes its content aria-busy and inert, covers it with the spinner and says what is happening. No motion under reduced motion; without JavaScript the busy content stays usable.
Spinner
Skeleton
Busy
Show people the page heard them: a spinner where something is working, gray shapes where content is on its way, and a form that cannot be clicked twice while it saves.
Also called
spinnerloading spinnerskeleton screenskeleton loaderpreloaderbusy indicatorloading animationprogress spinner
What it replaces
- page-builder preloaders and loading animations
- spinner GIFs
- skeleton screen libraries
- jQuery BlockUI-style busy overlays
Good for
A wait longer than about a second: a spinner in a button or beside “Loading results”, a skeleton where a list or card is about to arrive (so the page does not jump when it does), and a busy wrapper round a form or panel while it saves, so it cannot be submitted twice.
Not for
A whole-page preloader that hides a page which could already be read: show the content and mark only the part that is waiting. Waits under a second, which feel instant without one (the busy overlay waits 300 ms before it shows for that reason). And progress you can measure: a known percentage is a <progress> bar, not a spinner.
Accessibility
Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.
- Spinner: role="status" with a name (“Loading”, or `label`); the ring is aria-hidden. Rendered in place before the wait, it is read when reached; for an announcement, use busy.
- Skeleton: the shapes are aria-hidden, because gray bars mean nothing read aloud. With `label`, a visually hidden status says it instead.
- Busy: while data-busy is set the content is aria-busy="true" and inert, so it cannot be clicked, focused or submitted twice. The status that says `label` sits outside the busy content, because screen readers hold back changes inside an aria-busy region. If focus was in the content, it moves to the wrapper and back to the same control when the wait ends. `slowText` is said if the wait runs long; `doneLabel` when it clears.
- prefers-reduced-motion: the ring stops turning and fades gently instead, the skeleton does not shimmer, and the busy overlay appears without a fade.
- In forced-colors mode the ring and the skeleton shapes take the system text color.
- Without JavaScript a spinner and a skeleton render as given, and a busy wrapper renders its content, usable: the overlay, aria-busy and inert only ever come from the script.
Where it's live
- superherotech.ai: /elements/loading/ (demo)
How to ask for it
“The loading on our home page, with …”
Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.
More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Toast, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.
More in Feedback & states
See them all working- Stepper
Show people where they are in a checkout or a sign-up, how far they have come and what is left, on a laptop or a phone.
- Tooltip
A small explanation on a word or an info icon, there when someone points at it or tabs to it, and out of the way the rest of the time.
- Notice
Say what just happened, or what needs attention, right where it applies, in a color that says how much it matters.
- Toast
A quiet “Saved” or “Link copied” in the corner that confirms the click and gets out of the way, with an Undo when one is needed.
Want the loading on your site?
Tell us about the business. We build the site with it, launch it, and change it whenever you ask.