English | 中文

Mini Progress

一个轻量级的虚假进度工具，适用于后端接口响应时间较长但又无法提供真实进度的场景。

模拟一个自然增长的进度条，在等待异步操作完成时提升用户体验。

Demo

• 在线演示(React)
• 在线演示(Vue)

常见使用场景:

• 接口请求时间较长，但无法提供进度反馈
• 数据导出
• AI耗时任务处理
• 其他任何无法提供真实进度反馈的操作

特性

• 轻量级，无任何依赖
• 虚假进度模拟
• 支持自定义速度和最大进度
• 支持控制 start / stop / clean 操作

安装

npm i progress-mini

or

yarn add progress-mini

引入

import { miniProgress } from "progress-mini";

使用说明

const { start, stop, clean } = miniProgress(
  // 设置进度的回调函数
  (v) => {
    // 这里设置进度值
  },
  // 最大进度值，默认：99
  99,
  // 进度更新速度，默认：100ms
  100
)

返回值

{
  /** 开始进度 */
  start: () => void
  /** 停止进度，但不清零 */
  stop: () => void
  /** 停止进度并清零 */
  clean: () => void
}

React 使用示例

React 中有两种使用方式：

import { miniProgress, MiniProgressType } from "progress-mini";

// 方式一：使用 useMemo
const [progress, setProgress] = useState(0);
const progressRef = useRef(0);

const { start, stop, clean } = useMemo(() => {
  return miniProgress(
    (v: number) => {
      progressRef.current = v;
      setProgress(v);
    }
  );
}, [])


// 方式二：使用 ref
const ref = useRef<MiniProgressType>();
if (!ref.current) {
  ref.current = miniProgress(
    (v: number) => {
      progressRef.current = v;
      setProgress(v);
    }
  );
}
const { start, stop, clean } = ref.current;

Vue 使用示例

import { ref } from "vue";
import { miniProgress } from "progress-mini";

const progress = ref(0);

const { start, stop, clean } = miniProgress(
  (v: number) => progress.value = v,
);

参数

// 设置进度的回调函数
callback: (v: number) => void,
// 最大进度值，默认：99
max?: number,
// 进度更新速度，默认：100ms
speed?: number

更新日志

[1.0.0] - 2026-03-14

首次提交.