
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`.
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.

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

Build a CSS three-dot loader with three equal circular spans sharing one keyframe animation.