---

Progress · 顶部进度条

NProgress 风格的页面顶部进度条。零 UI 框架依赖，自行管理 DOM 和样式。

progress

全局单例，直接调用：

import { progress } from '@bilibaba/ts-lab/ui'

start

开始显示进度条并启动自动增长（trickle）。

progress.start()

进度条会自动以小幅随机增量前进，模拟加载过程。

done

完成进度并隐藏进度条。进度条会在过渡动画完成后自动消失。

progress.done()

set

手动设置进度百分比（0–100）。

progress.set(40)  // 设置为 40%
progress.set(80)  // 设置为 80%

inc

手动递增进度，不传参数则使用随机小增量（0.5–3%）。

progress.start()    // 开始 + 自动 trickle
progress.inc(10)    // 手动推 10%
progress.inc()      // 随机增量
progress.done()     // 完成

configure

运行时更新配置，下次 start() 生效。

// 单色
progress.configure({ color: '#e91e63' })

// 双色渐变 — 从左到右逐渐加深
progress.configure({ color: ['#667eea', '#764ba2'] })

// 多彩渐变 — 五颜六色
progress.configure({ color: ['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f'] })

参数	类型	默认值	说明
color	string | string[]	'#29d'	进度条颜色。string 为纯色，string[] 为从左到右渐变
height	number	3	高度 (px)
speed	number	200	CSS 过渡速度 (ms)
trickle	boolean	true	是否自动增长
trickleSpeed	number	200	自动增长间隔 (ms)
minimum	number	0.08	起始百分比 (0–1)
easing	string	'ease'	CSS 缓动函数

典型用法

import { progress } from '@bilibaba/ts-lab/ui'

// 路由切换 — 默认蓝色
progress.start()
// ... 异步加载
progress.done()

// 加载前配置渐变色 — 火焰风格
progress.configure({ color: ['#f97316', '#ef4444', '#dc2626'] })
progress.start()
// ... 完成后
progress.done()