---
title: WKProgress 进度条
group:
  title: 展示组件
  path: /show/
---

## 何时使用

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

- 继承微信 Progress 所有属性
- 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过 2 秒时；
- 当需要显示一个操作完成的百分比时。

## 基本使用

```tsx
/**
 * title: 基本使用
 * desc: 基本使用方法
 */
import React from 'react';
import { View, WKProgress } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
import './index.less';

export default () => {
  return (
    <PageWrapper title="基本使用">
      <View className="wk-progress-page">
        <View className="content">
          <WKProgress percent={60} showInfo />
        </View>
      </View>
    </PageWrapper>
  );
};
```

## 置灰

```tsx
/**
 * title: 置灰
 * desc: 进度条变成灰色
 */
import React from 'react';
import { View, WKProgress } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
import './index.less';

export default () => {
  return (
    <PageWrapper title="置灰">
      <View className="wk-progress-page">
        <View className="content">
          <WKProgress percent={60} activeColor="#E5E5E5" showInfo />
        </View>
      </View>
    </PageWrapper>
  );
};
```

## 自定义样式

```tsx
/**
 * title: 自定义样式
 * desc: 自定义样式，改变进度条的颜色，及类型，还可以使用其他微信Progress自带的Api
 */
import React from 'react';
import { View, WKProgress } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
import './index.less';

export default () => {
  return (
    <PageWrapper title="自定义样式">
      <View className="wk-progress-page">
        <View className="content">
          <WKProgress percent={60} activeColor="#1B99FF" showInfo />
        </View>
        <View className="content">
          <WKProgress percent={60} activeColor="#FFBC3D" showInfo />
        </View>
        <View className="content">
          <WKProgress percent={60} activeColor="#FF4918" showInfo />
        </View>
        <View className="content">
          <WKProgress percent={60} type="circle" activeColor="#FF4918" showInfo />
        </View>
        <View className="content">
          <WKProgress percent={60} type="dashboard" activeColor="#FF4918" showInfo />
        </View>
      </View>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKProgress/index.d.ts' ></API>
