---
title: Progress - 进度条组件
nav:
title: RN组件
path: /react-native
group:
title: 反馈组件
path: /feedback
---
# Progress 进度条
## 效果演示
### 1. LineProgress 默认效果
```tsx | pure
```
### 2. LineProgress 值文本在顶部效果
```tsx | pure
```
### 3. LineProgress 渐变色效果
```tsx | pure
```
### 4. LineProgress 修改宽度效果
```tsx | pure
```
### 5. CircleProgress 默认效果
```tsx | pure
```
### 6. CircleProgress 不显示值文本效果
```tsx | pure
```
### 7. CircleProgress 自定义颜色效果
```tsx | pure
```
### 8. CircleProgress 渐变色效果
```tsx | pure
```
### 9. CircleProgress 修改宽度效果
```tsx | pure
```
## API
```tsx | pure
export interface ProgressProps {
/** 长度 */
width?: number;
/** 颜色, 支持渐变 */
color?: string | string[];
/** 背景色 */
bgColor?: string;
/** 宽度 */
strokeWidth?: number;
/** 值 */
value?: number;
/** 值文本位置 */
labelPosition?: 'right' | 'top';
/** 是否显示单位 */
unit?: string;
/** 自定义文本 */
label?: ReactNode;
/** 是否显示文本 */
showLabel?: boolean;
/** 文本样式 */
labelStyle?: StyleProp;
}
```