Copy-ready code
Loading States
Nine loading examples: skeletons that reserve space, indeterminate indicators, and measurable progress. The examples include accessible labels and reduced-motion handling with prefers-reduced-motion.
Skeletons
A skeleton approximates the incoming content with correctly sized blocks and a sweeping shimmer. Reserving space helps reduce layout shifts.
Full card
List row
Indeterminate indicators
When the remaining time is unknown, use an indeterminate indicator. These three examples show activity without inventing a completion estimate.
Loading
Spinning ring
Sending
Bouncing dots
Indeterminate bar
Determinate progress
Show the percentage when it is known. Real progress helps people judge the wait and decide whether to do something else.
Progress bar
72 %
Percentage ring
Converting to WAV
Processing runs in your browser
Processing panel
Use the example in your project
Copy the HTML and CSS for the same piece. If a JavaScript button is shown, include that script too. Keep IDs unique, update links, and test keyboard focus and small screens. These examples demonstrate front-end behavior; forms do not create accounts or submit real orders. Names, testimonials, prices, and metrics are illustrative sample content.
All component categories · CSS generators · Downloadable templates