LineLoadingProgress - 页面顶部加载进度条组件

轻量级页面顶部加载进度条，模拟 NProgress / YouTube 加载条效果。

目录

• 简介
• 特性
• 安装与引入
  • 脚本猫
  • 直接引入
  • Node.js
  • AMD
• 快速开始
• 配置选项
• API 参考
• 示例代码
  • 基础用法
  • 自定义样式
  • 手动控制进度
  • 配合异步请求
• 浏览器兼容
• 版本历史
• 许可证

简介

LineLoadingProgress 是一个零依赖的页面顶部加载进度条组件。使用浏览器原生 <progress> 元素实现，提供类似 NProgress 的 trickle（自动递进）效果，可通过简单 API 启动、递增、完成或隐藏进度条。

特性

• 零依赖 — 纯原生 JavaScript，使用 <progress> 元素
• Trickle 模式 — 自动递进模拟真实加载体验
• 链式调用 — 所有方法返回 this，支持 bar.start().inc().done()
• 可配置 — 颜色、高度、速度、z-index 等均可自定义
• 可选 Spinner — 可开启右上角旋转指示器
• UMD 模块 — 支持 AMD / CommonJS / 全局变量

安装与引入

脚本猫

// ==UserScript==
// @name         我的脚本
// @require      https://scriptcat.org/lib/xxxx/LineLoadingProgress.js
// ==/UserScript==

(function () {
  'use strict';
  const bar = new LineLoadingProgress();
  bar.start();
})();

直接引入

<script src="LineLoadingProgress.js"></script>
<script>
  const bar = new LineLoadingProgress();
  bar.start();
</script>

Node.js

const LineLoadingProgress = require('./LineLoadingProgress.js');
// Node.js 无 DOM，仅可用于单元测试

AMD

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

配置选项

注意：配置修改对已创建实例立即生效（configure 方法会动态更新 DOM 样式）。

API 参考

示例代码

基础用法

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

浏览器兼容

使用 <progress> 元素和 CSS transition 实现，需浏览器环境。脚本猫环境完全兼容。

版本历史

许可证

MIT License