Gallery

Create two loading indicators: a dot sequence and a spinner. Treat them as UI components, not illustrations. Each should have a default size, color token, and motion pattern that can be reused across the product.

Show the loaders in the states a designer would actually ship: idle preview, active animation, and reduced-motion fallback. Include examples on light, dark, and busy content backgrounds so visibility is tested, not assumed. The indicator should remain readable at small sizes and feel balanced when centered or used inline next to text.

Keep the motion simple and purposeful. The dot loader should communicate ongoing activity through rhythm or phase shift; the spinner should read as continuous progress without looking heavy or distracting. If you introduce brand styling, it should come through in shape, stroke, or color treatment, not in decorative effects.