Logo 描邊載入器

把品牌標誌變成載入指示。載入中，一段短虛線沿著 logo 的描邊路徑不停繞行，底下襯一條淡淡的完整描邊；isComplete 轉為 true（或 loading 轉為 false）後，虛線向前長成完整描邊，接著淡入填色——開放線沒有填色可言，就改成描邊從中間色轉為主色。整段動畫結束後呼叫一次 onDone。預設路徑是 WebberUI 的品牌曲線，換成自己的 path 與 viewBox 即可套用任何標誌；開啟 fullscreen 會以半透明模糊疊層蓋住整頁，完成後淡出。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

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>
  );
}

安裝

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

使用

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

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

// 資料回來時把 isComplete 設為 true，動畫跑完會呼叫 onDone
<LogoTraceLoader
  loading={loading}
  isComplete={done}
  onDone={() => setLoading(false)}
/>

// 換成自己的封閉 path，完成時填色淡入
<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

細節

• 階段依序是 loop → closingOutline → fadingFill → done。收合固定 360ms（cubic-bezier(0.23, 1, 0.32, 1)），填色淡入用 fillFadeSeconds；切換時點以 setTimeout 依總時長計算，不依賴 animationend，所以元素中途卸載或動畫被打斷都不會漏掉 onDone。
• 短虛線畫在 pathLength=1 的路徑上，strokeDasharray 為 0.16 0.84、strokeDashoffset 由 0 線性走到 −1，任何形狀都能無縫循環；收合時虛線從當下位置向前長成 1 0，不會跳回起點。
• 一開始就是完成狀態（例如 loading={false}）時直接顯示最終樣子，不重播收合也不呼叫 onDone；loading 再轉回 true 就從 loop 重新開始。
• 顏色變數：--wb-ltl-color（主色，預設 currentColor）、--wb-ltl-track（收合後、上色前的中間色，預設由 currentColor 混透明推導）、--wb-ltl-ease（描邊轉色的 easing）。用 className 設文字色即可整組換色。
• 全頁模式是 fixed inset-0 z-50 的半透明模糊疊層（bg-white/80、深色 bg-neutral-950/80），進出各淡入淡出 200ms。

可及性

• 外層是 role="status"、aria-live="polite" 區域，載入中朗讀 label，完成時朗讀「載入完成」
• SVG 設為 aria-hidden，動畫本身不會被輔助科技讀出
• 全頁模式的狀態文字放在疊層之外，疊層淡出後完成訊息仍會被朗讀
• 使用者系統開啟「減少動態效果」時不繞行：載入中顯示靜態的完整淡描邊與可見的 label 文字，完成時直接顯示最終狀態，並在下一個 tick 呼叫 onDone