zilly-ui/src/progress/progress.mdx

Zilly web react ui components

---
name: Progress
---

import { Playground, Props, } from "docz";

import  Progress  from "./progress";
import { Theming } from '../';
import DemoWrap from './demo';

# Progress

## Props

|Property | Description | Type | Default |
:---|:---|:---|:---|
|type|  to set the type, options: line circle dashboard | string | line|
|strokeColor |color of progress bar | string | - |
|strokeWidth |to set the width of the progress bar, unit: px | number | - |
|innerBg | Progress bar wrap layer background| (rgba\|string) | gray |
|percent |same as target attribute of a, works when href is specified| string | - |
|style | css styled | csspropertites | - |
|className| progress bar wrpa class name | string | - |
|handleCompolete | Callback after completion | function | - |



<Props of={Progress} />

## Basic usage

<Playground>
    <Theming >
        <Progress percent={50}></Progress>
        <Progress percent={100}></Progress>
    </Theming>
</Playground>

## Set the background color or strokeWidth

<Playground>
    <Theming >
        <Progress percent={50} strokeColor={"red"}></Progress>
        <Progress percent={100} strokeWidth={20}></Progress>
    </Theming>
</Playground>

## Dynamic change

<Playground>
    <Theming >
      <DemoWrap
        render={(percent) => <Progress percent={percent} strokeColor={"red"}></Progress>}
      />
    </Theming>
</Playground>

## Dynamic change

<Playground>
    
    <Theming >
      <DemoWrap
        render={(percent) => <Progress percent={percent} strokeColor={"red"}></Progress>}
      />
    </Theming>
</Playground>