Design AtlasThe standard indeterminate indicator for a small space — inside a button, or an inline loading spot. It fits short, unpredictable requests like a form submit or an API call; once a task breaks into steps with a known progress, a determinate progress-ring serves the user better.
Built by coloring the whole border a faint tone (var(--line)) except the top edge, which gets the accent color, then spinning it forever with a linear transform: rotate. At three lines of CSS it's the cheapest loader here, which is why it's the default in most component libraries.
If it flashes on and off within 200ms it reads as a glitch, so skip showing it at all for loads that fast; for a long wait covering the whole screen, a skeleton usually feels faster. Give the wrapper role="status" and aria-live="polite" — the spin itself is decorative and can stay hidden from screen readers. Consider swapping the spin for a static ring icon under prefers-reduced-motion.