轻量级页面顶部加载进度条，模拟 NProgress / YouTube 加载条效果。
LineLoadingProgress 是一个零依赖的页面顶部加载进度条组件。使用浏览器原生 <progress> 元素实现，提供类似 NProgress 的 trickle（自动递进）效果，可通过简单 API 启动、递增、完成或隐藏进度条。
<progress> 元素this，支持 bar.start().inc().done()// ==UserScript==
// @name 我的脚本
// @require // @require https://scriptcat.org/lib/6778/1.0.0/LineLoadingProgress.js?sha384-gqSe2bIi84WjDuED2nD9xHWuxy+H/bNmSUTx7CxN2NlaW1uo12XFRv6sK0IV327L
// ==/UserScript==
(function () {
'use strict';
const bar = new LineLoadingProgress();
bar.start();
})();
<script src="LineLoadingProgress.js"></script>
<script>
const bar = new LineLoadingProgress();
bar.start();
</script>
const LineLoadingProgress = require('./LineLoadingProgress.js');
// Node.js 无 DOM，仅可用于单元测试
define(['LineLoadingProgress'], function (LineLoadingProgress) {
const bar = new LineLoadingProgress();
return bar;
});
// 创建并启动
const bar = new LineLoadingProgress();
bar.start(); // 从 8% 开始，自动 trickle 递进
// 标记完成
bar.done(); // 快速推到 100%，淡出消失
// 链式调用
new LineLoadingProgress().start().done();
| 选项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
color |
string | '#35a935' |
进度条颜色 |
height |
string | '2px' |
进度条高度 |
zIndex |
number | 1000 |
z-index |
trickle |
boolean | true |
是否自动 trickle |
trickleSpeed |
number | 400 |
trickle 间隔(ms) |
trickleSize |
number | 0.02 |
每次 trickle 增量 |
minimum |
number | 0.08 |
最小进度值（避免 0% 看不到） |
maximum |
number | 1.0 |
最大进度值 |
speed |
number | 300 |
进度变化动画时长(ms) |
easing |
string | 'ease' |
CSS easing 函数 |
parentId |
string | 'wx_process' |
进度条 DOM id |
showSpinner |
boolean | false |
是否显示右上角旋转 spinner |
spinnerColor |
string | '#35a935' |
spinner 颜色 |
注意：配置修改对已创建实例立即生效（
configure方法会动态更新 DOM 样式）。
| 方法 | 参数 | 返回值 | 说明 |
|---|---|---|---|
start() |
无 | this |
启动进度条（从 minimum 开始，自动 trickle） |
inc(amount?) |
number 增量（默认 trickleSize） |
this |
递增进度，进度越大增量越小 |
set(n) |
number 进度值 |
this |
手动设置进度值 |
done() |
无 | this |
标记完成，淡出消失 |
hide() |
无 | this |
直接隐藏移除 |
getProgress() |
无 | `number | null` |
configure(opts) |
Partial<Options> |
this |
动态更新配置 |
destroy() |
无 | this |
销毁实例，移除所有 DOM 和定时器 |
const bar = new LineLoadingProgress();
// 启动 → 自动 trickle → 完成
bar.start();
// 模拟加载完成
setTimeout(() => bar.done(), 3000);
// 蓝色进度条，3px 高，带 spinner
const bar = new LineLoadingProgress({
color: '#29d',
height: '3px',
showSpinner: true,
spinnerColor: '#29d',
});
bar.start();
const bar = new LineLoadingProgress({ trickle: false });
bar.set(0.1); // 10%
bar.set(0.3); // 30%
bar.set(0.7); // 70%
bar.done(); // 100% → 淡出
const bar = new LineLoadingProgress();
async function loadData() {
bar.start();
try {
const response = await fetch('/api/data');
bar.inc(0.3);
const data = await response.json();
bar.done();
return data;
} catch (err) {
bar.hide(); // 出错时直接隐藏
throw err;
}
}
| 环境 | 支持版本 |
|---|---|
| Chrome | 60+ |
| Firefox | 55+ |
| Safari | 11+ |
| Edge | 79+ |
| Node.js | 仅可用于非渲染场景（无 DOM） |
使用
<progress>元素和 CSS transition 实现，需浏览器环境。脚本猫环境完全兼容。
| 版本 | 日期 | 说明 |
|---|---|---|
| 1.0.0 | 2024-06-24 | 从油猴脚本重构为纯 JS UMD 库，新增 trickle/inc/done/configure 等方法 |