For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/components/loading-bar.md.

LoadingBar 顶部加载条

展示页面或任务的加载进度。

基本用法

basic.tsx
import { Button, useLoadingBar } from '@ifhover/leaf-ui';

export function LoadingBarBasic() {
  const bar = useLoadingBar();
  return (
    <Button
      onClick={() => {
        const done = bar.start();
        setTimeout(done, 1600);
      }}
    >
      模拟页面加载
    </Button>
  );
}

更多用法

advanced.tsx
import { Button, Space, useLoadingBar } from '@ifhover/leaf-ui';

export function LoadingBarProgress() {
  const bar = useLoadingBar();
  return (
    <Space>
      <Button
        variant="outline"
        onClick={() => {
          bar.reset();
          bar.start();
          bar.set(40);
        }}
      >
        进度 40%
      </Button>
      <Button onClick={() => bar.finish()}>完成</Button>
      <Button variant="soft" onClick={() => bar.reset()}>
        重置
      </Button>
    </Space>
  );
}

使用说明

ConfigProvider 自动提供加载条。start() 返回对应任务的完成函数,适合在 finally 中调用。多个任务同时运行时,全部完成后才结束。

类型

组装数据、定义回调和使用 ref 时,可以导入这些类型。

import type { LoadingBarApi, LoadingBarProps, LoadingBarProviderProps } from '@ifhover/leaf-ui';

LoadingBarApi API

属性类型默认值说明
start() => () => void必填开始任务,返回该任务完成函数
finish() => void必填完成一个任务,全部完成后收起
set(progress: number) => void必填设置显示进度
reset() => void必填重置状态或重试

LoadingBarProps API

属性类型默认值说明
activebooleanfalse正在加载
progressnumber—进度 0–100,省略时自动估计
colorstring—颜色
heightnumber3高度,数字按像素计算
position'top' | 'bottom''top'显示或插入位置
classNamestring—容器类名
styleCSSProperties—容器内联样式

LoadingBarProviderProps API

属性类型默认值说明
colorstring—颜色
heightnumber3高度,数字按像素计算
position'top' | 'bottom''top'显示或插入位置
classNamestring—容器类名
styleCSSProperties—容器内联样式
childrenReactNode—内容或下级项目