Progress Ring

A ring or pie fills clockwise to its percentage.

Add a "Donut Chart Fill" animation (also called a pie chart sweep or animated donut chart) to [where].
Starting at the top, each segment should sweep clockwise in turn until the ring shows its share, easing out smoothly as it finishes.
Play it once when the chart comes into view, and keep the actual values available as text for screen readers.

A ring or arc rotates continuously to show that something is loading.

Add a "Circular Spinner" (also called a spinner or throbber) to [where].
An arc should rotate steadily around a faint ring while it stretches longer and shorter, smooth and continuous.
Keep the rotation seamless, give it a loading label for screen readers, and slow or stop it for users who prefer reduced motion.

A bar fills from left to right in proportion to task completion.

Add a "Determinate Progress Bar" (also called a progress bar fill or progress indicator) to [where].
The bar should fill from left to right in step with the real progress, easing smoothly between updates, with the percentage shown beside it.
Use proper progress bar semantics with current, minimum and maximum values so screen readers can read it, and never let the fill move backwards.

A bar or ring fills as the user scrolls through the page or article.

Add a "Scroll Progress Indicator" (also called a reading progress bar) to [where].
A thin bar along the top should fill from left to right in step with how far the reader has scrolled, reaching full width at the end.
Tie it directly to the scroll position with no easing lag, and keep it from covering the content.

Gray placeholder blocks fade in and out gently to signal loading.

Add a "Pulse Placeholder" (also called a skeleton pulse) to [where].
Gray placeholder blocks shaped like the coming content should slowly fade lighter and back together in a gentle, steady rhythm.
Match the placeholders to the real layout so nothing jumps when the content arrives, and keep them still for users who prefer reduced motion.

Gray placeholder shapes show a light highlight sweeping across them.

Add a "Skeleton Shimmer" (also called a skeleton wave or shimmer effect) to [where].
A soft band of light should sweep across the gray placeholder shapes from left to right and pause briefly before the next pass: smooth and unhurried.
Match the placeholder shapes to the real layout so nothing jumps when the content loads, and show static placeholders to users who prefer reduced motion.

A thin bar at the top of the page creeps forward during navigation and finishes on load.

Add a "Top Loading Bar" (also called a page progress bar) to [where].
A thin bar along the top edge should dart forward at first and then creep more and more slowly while the page loads; when loading finishes it should race to the end and fade out.
Never let it reach the end before loading is actually done, and keep it from covering or shifting the page content.