無需複雜筆繪，僅靠圖層樣式即可在幾分鐘內產出色彩繽紛、具備玻璃質感的網頁進度條。適合儀表板、載入動畫、技能展示等 UI 場景。

最終效果

核心圖層結構

1. 背景軌道：圓角矩形，填充深灰，內陰影模擬凹槽。
2. 進度填充：圓角矩形（寬度對應進度 %），核心樣式如下。

進度填充關鍵圖層樣式

1. 漸層疊加—— 彩虹光譜

• 混合模式：正常
• 不透明度：100%
• 樣式：線性，角度 0°（左→右）
• 漸層色標（左→右）：#FF0000 → #FF7F00 → #FFFF00 → #00FF00 → #0000FF → #4B0082 → #8B00FF
• 位置均勻分佈（約 16.6% 間隔）

2. 斜面與浮雕—— 玻璃凸起感

• 樣式：內斜面
• 技法：平滑
• 深度：120%
• 方向：向上
• 大小：3-5 px（視進度條高度）
• 光澤等高線：環形（凸起中間亮兩側暗）
• 高光模式：螢幕幕，不透明度 80%
  陰影模式：正片疊底，不透明度 40%

3. 內發光—— 邊緣發光

• 混合模式：螢幕幕
• 不透明度：50%
• 顏色：白色
• 大小：2 px

4. 投影—— 分離層次

• 混合模式：正片疊底
• 顏色：黑色
• 不透明度：20%
• 角度：90°，距離 1 px，大小 2 px

動態進度實作提示

• 靜態設計：直接調整進度填充圖層的矩形寬度（屬性面板或 Ctrl+T）。
• 動態原型：將進度填充轉為智慧物件，配合「時間軸」面板製作關鍵幀動畫，或匯出多張狀態圖供前端用 CSS `width` 過渡實現。
• 無障礙：確保彩虹漸層在灰階模式下仍有足夠明度對比，或提供單色高對比度替代模式。

變體擴展

風格	關鍵修改
霓虹發光	移除斜面浮雕，加強外發光（螢幕幕、品牌色、大小 10px）
材質金屬	漸層改為金屬色系（金/銀/銅），斜面深度 300%+，加入紋理疊加
扁平極簡	移除所有立體樣式，純漸層填充，圓角 2px