线性进度条

线性进度指示器，通常称为加载器，表示未指定的等待时间或显示过程的长度。

简介

进度指示器向用户告知正在进行中的过程的状态，例如加载应用、提交表单或保存更新。

默认情况下，LinearProgress 是不确定的，表示未指定的等待时间。要使其真正表示操作将花费多长时间，请使用确定模式。

组件的动画尽可能依赖 CSS，即使在 JavaScript 加载之前也能工作。

组件

在安装后，您可以开始使用以下基本元素构建此组件

import LinearProgress from '@mui/joy/LinearProgress';

export default function MyApp() {
  return <LinearProgress />;
}

变体

线性进度条组件支持四种全局变体：solid、soft（默认）、outlined 和 plain。

颜色

主题中包含的每种调色板都可以通过 color 属性使用。尝试组合不同的颜色。

尺寸

线性进度条组件开箱即用地提供三种尺寸：sm、md（默认）和 lg。

确定模式

如果您想指示指定的等待时间，可以使用 determinate 属性。

粗细

为 thickness 属性提供一个数字以控制进度条的描边宽度。

第三方集成

use-count-up

使用 use-count-up 包，您可以通过提供 start、end 和 duration 值来创建计数动画。

CSS 变量 Playground

试用组件上提供的所有 CSS 变量，以查看设计如何变化。

您可以使用这些变量在 sx 属性和主题上自定义组件。

常见示例

带标签

API

请参阅下面的文档，以获取此处提及的组件的所有属性和类的完整参考。

• <LinearProgress />