# CricleProgress

### Intro

Circular progress bar component

### Install

```ts
// react
import { CircleProgress } from '@nutui/nutui-react';
```


### Basic Usage

:::demo
```tsx
import React from "react";
import { CircleProgress } from '@nutui/nutui-react';

const App = () => {
  return (
    <>
      <CircleProgress progress={10} />
    </>
  )
}
export default App;
```
:::

### Ring progress bar custom style

:::demo
```tsx
import React from "react";
import { CircleProgress } from '@nutui/nutui-react';

const progressOption = {
  radius: 50,
  strokeOutWidth: 10,
  backColor: '#d9d9d9',
  progressColor: 'red',
}
const App = () => {
  return (
    <>
      <CircleProgress progress={50} progressOption={progressOption} />
    </>
  )
}
export default App;
```
:::

### Ring progress bar custom content
:::demo
```tsx
import React from "react";
import { CircleProgress } from '@nutui/nutui-react';

const progressOption = {
  radius: 50,
  strokeOutWidth: 10,
  backColor: '#d9d9d9',
  progressColor: 'red',
}
const App = () => {
  return (
    <>
      <CircleProgress progress={50} isAuto>
        <div>custom</div>
      </CircleProgress>
    </>
  )
}
export default App;
```
:::

### Dynamically change the progress of the circular progress bar
:::demo
```tsx
import React, { useState } from "react";
import { Button, CircleProgress } from '@nutui/nutui-react';

const progressOption = {
  radius: 50,
  strokeOutWidth: 10,
  backColor: '#d9d9d9',
  progressColor: 'red',
}
const App = () => {
  const [percent, setPercent] = useState(50)
  const [strokeInnerWidth, setStrokeInnerWidth] = useState(10)
  const setReduceVal = () => {
    if (percent - 10 <= 0) {
      setStrokeInnerWidth(0)
      setPercent(0)
      return
    }
    setPercent(percent - 10)
  }
  const setAddVal = () => {
    setStrokeInnerWidth(10)
    if (percent >= 100) {
      return
    }
    setPercent(percent + 10)
  }
  return (
    <>
      <div className="demo__piece">
        <CircleProgress
          progress={percent}
          progressOption={progressOption}
          strokeInnerWidth={strokeInnerWidth}
         />
      </div>
      <div className="demo__btn">
        <Button type="primary" onClick={setReduceVal} style={{ marginRight: '10px' }}>
          reduce
        </Button>
        <Button type="primary" onClick={setAddVal}>
          add
        </Button>
      </div>
    </>
  )
}
export default App;
```
:::


## Prop

| Attribute | Description | Type | Default
|----- | ----- | ----- | -----
| progress | Progress Rate | number \| string | Required, no default value
| strokeWidth | Stroke width | number \| string | `5`
| radius | radius | number \| string | `50`
| circleColor | Progress color, passing object to render gradient | number \| string | `#fa2c19`
| pathColor | Track Color | string | `#d9d9d9`
| strokeLinecap | Stroke linecap, can be set to square butt | string | `round`
| clockwise| Whether to be clockwise | boolean | `true`

## Theming

### CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).

| Name | Default Value |
| --- | --- |
| --nutui-circleprogress-primary-color | `$primary-color` |
| --nutui-circleprogress-path-color | `#e5e9f2` |
| --nutui-circleprogress-text-color | `$title-color` |
| --nutui-circleprogress-text-size | `$font-size-3` |
