TH The Loading Loop
Topic

Spinner Recipes

A spinner should be easy to paste and easier to own. These recipes keep the DOM small, animate deliberately, and expose the variables that control size, color, rhythm, and contrast. Each pattern includes a reduced-motion response and separates visual decoration from status text. The rotation may be infinite; the loading state absolutely should not be.

Spinner Recipes

CSS Loading Spinner: A Clean, Copyable Pattern

Create a CSS loading spinner with a square element, a circular border, one contrasting border side, and an infinite linear rotation using `transform`.

6 min read · 2026-07-19