Design AtlasInstead of an abstract shape, this fills the wait with the brand mark itself, turning indeterminate downtime into brand exposure. It fits a first-impression spot — right after login, an app splash — and gets tiresome fast if reused for something as routine as a button load, where a plain ring spinner is the safer choice. Use a fictional mark, as this demo does, rather than copying a real logo.
The logo's outline is drawn as an SVG path; stroke-dasharray sets the line's full length, and a keyframe animates stroke-dashoffset from that length down to 0, producing the "drawn along its outline" effect. Right after the line finishes, the fill's opacity rises from 0 to 1 so the shape fills in, then after a pause the dashoffset resets to the full length and the cycle repeats.
Even when brand exposure is the point, this is still an indeterminate loader underneath — prefer a determinate shape like progress-ring once real progress is knowable. Give the wrapper role="status" and aria-live="polite"; because the logo itself represents the brand rather than being pure decoration, an aria-label like "Loading Acme…" is more appropriate than aria-hidden. Under prefers-reduced-motion, skip the draw-in animation and show the completed logo as a static image.