LogoLoader takes your product's wordmark or symbol as an SVG and plays it as a loading state: each letter and shape is traced in turn, then the logo fills in and stays. Use it for the splash while a page or app boots. LogoSpinner is the looping Once UI mark, and Spinner stays the neutral loader for buttons and fields.
Pass the SVG as a URL (src, fetched on the client) or as markup (svg), for example a file a server component read, so the loader can draw on the first paint. The logo is drawn in one color, so one file covers both themes; color picks it.
Every path, circle, rect, ellipse, polygon and line is drawn. A compound path splits into its parts, so each letter, and each counter inside one, gets its own stroke. Strokes draw left to right by default. With order="document" they keep the file's order instead, so a logo can list its symbol last to have it land after the letters. Groups' transforms, masks and gradients are not read: export the logo with flat, outlined paths.
The intro plays once, and the filled logo holds for as long as the loader is on the page. onComplete fires when the intro has played; keep the splash up until both that and your data are ready, and pass settled so a remount never replays the strokes.
The loader is one status region named "Loading" unless you pass ariaLabel. With reduced motion the strokes are skipped and the logo fades in on the same schedule, so onComplete still fires.