---
name: Progress 进度条
route: /guide/progressBar
menu: response
---

import JsxParser from "react-jsx-parser";
import {
  MessageBox,
  InlineCode,
  Example,
  Code,
  PropsTable
} from "theme";
import { Progress, Bar } from "shineDev";
import Scroll from "./demo/Scroll";
import code from "./demo";
import "./demo/index.scss";

# Progress 进度条
## 概述

进度条组件常用于向用户展示某个耗时操作完成的进度，而不让用户感觉是程序失去了响应，从而更好地提升用户界面的友好性，通常用于如下场景：

- 在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。
- 在需要显示进度的流程中。

## 代码示例
#### 基础进度条

进度条组件由 `Progress` 和 `Bar` 两部分组成。通常情况下， `Progress` 作为容器组件，用于渲染进度条，`Bar` 作为状态组件，被容器组件包裹，用于显示当前进度信息。

  <Example 
    display={<JsxParser {...code.basic} />}
    code={{code:code.basic.jsx}}
    components={code.basic.components}
  />

#### 带背景色的进度条

与背景色修饰符搭配可以展示不同色彩状态的进度条，背景色信息可参考[Color 色彩](./color)。

  <Example 
    display={<JsxParser {...code.bg} />}
    code={{code:code.bg.jsx}}
    components={code.bg.components}
  />

#### 带条纹的进度条

使用带条纹的进度条可以让色彩识别有困难的用户更直观的显示当前进度。

  <Example 
    display={<JsxParser {...code.striped} />}
    code={{code:code.striped.jsx}}
    components={code.striped.components}
  />

#### 带动画的进度条

通过设置 `isAnimated` 属性可以产生视觉差动画，这将会使条纹具有从右向左的运动感。

  <Example 
    display={<JsxParser {...code.animated} />}
    code={{code:code.animated.jsx}}
    components={code.animated.components}
  />

#### 自定义高度

通过 `height` 属性可以配置进度条容器高度，支持预设的两种属性： small 、 large ，同时也支持设置自定义的尺寸，如 100px ，10% 等。

  <Example 
    display={<JsxParser {...code.height} />}
    code={{code:code.height.jsx}}
    components={code.height.components}
  />

#### 多进度

在一个 `Progress` 容器组件内部，可以同时排列多个 `Bar` 状态组件。各个状态组件之间彼此独立并排展示。

多个 percent 属性之和不能超过 **100** 。

  <Example 
    display={<JsxParser {...code.multi} />}
    code={{code:code.multi.jsx}}
    components={code.multi.components}
  />


## 配置参数

#### Progress

<PropsTable of={Progress} />

#### Bar

<PropsTable of={Bar} />

## FAQ

#### 我如何让进度条滚动起来？
答：Shine Design 提供了无状态的进度条组件，开发者需要在组件外部维护一个变量，通过动态的传递 `percent` 属性完成滚动效果。

  <Example 
    display={<Scroll />}
    code={{code:code.scroll.jsx}}
    components={code.scroll.components}
    isDisabledLive={true}
  />