Logo Trace Loader

Turn your brand mark into a loading indicator. While loading, a short dash keeps orbiting the logo's outline over a faint full-length track; once isComplete turns true (or loading turns false), the dash grows forward into the full outline and the fill fades in — an open line has nothing to fill, so its stroke shifts from the mid-tone to the main colour instead. onDone fires once when the whole sequence ends. The default path is the WebberUI brand curve; pass your own path and viewBox to use any mark. Turn on fullscreen to cover the page with a translucent blurred overlay that fades out when done.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<LogoTraceLoader/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/logo-trace-loader.en.json

Usage

import { LogoTraceLoader } from "@/components/ui/logo-trace-loader";

const [loading, setLoading] = React.useState(true);
const [done, setDone] = React.useState(false);

// Set isComplete to true when the data arrives; onDone fires after the animation
<LogoTraceLoader
  loading={loading}
  isComplete={done}
  onDone={() => setLoading(false)}
/>

// Use your own closed path; the fill fades in on completion
<LogoTraceLoader
  path="M18 8H46A10 10 0 0 1 56 18V46A10 10 0 0 1 46 56H18A10 10 0 0 1 8 46V18A10 10 0 0 1 18 8Z"
  fill="rgb(16 185 129 / 0.18)"
  strokeWidth={5}
  isComplete={done}
/>

Props

How it works

• The phases run loop → closingOutline → fadingFill → done. The close is a fixed 360ms (cubic-bezier(0.23, 1, 0.32, 1)) and the fill fade uses fillFadeSeconds; phase switches are scheduled with setTimeout from the computed total rather than animationend, so onDone is never missed if an element unmounts or an animation is interrupted.
• The short dash is drawn on a pathLength=1 path with strokeDasharray of 0.16 0.84 and strokeDashoffset moving linearly from 0 to −1, so any shape loops seamlessly; on close the dash grows forward from wherever it is into 1 0, without jumping back to the start.
• If the loader starts out complete (for example loading={false}), it shows the final state directly without replaying the close or calling onDone; switching loading back to true restarts from the loop.
• Colour variables: --wb-ltl-color (main colour, defaults to currentColor), --wb-ltl-track (the mid-tone after closing and before colouring, derived from currentColor mixed with transparent by default) and --wb-ltl-ease (easing for the stroke colour change). Setting a text colour through className recolours the whole set.
• Fullscreen mode is a fixed inset-0 z-50 translucent blurred overlay (bg-white/80, bg-neutral-950/80 in dark mode) that fades in and out over 200ms.

Accessibility

• The wrapper is a role="status", aria-live="polite" region that announces label while loading and "載入完成" (Loaded) when done
• The SVG is aria-hidden, so the animation itself is never read out by assistive technology
• In fullscreen mode the status text lives outside the overlay, so the completion message is still announced after the overlay fades out
• When the user has reduce motion enabled at the system level there is no orbit: while loading it shows a static, faint full outline with visible label text, and on completion it jumps to the final state and calls onDone on the next tick