## 6.7.1.快速使用 :id=start
```html
<div id="demoProgress1"></div>
<script>
layui.use(['CircleProgress'], function () {
var CircleProgress = layui.CircleProgress;
// 快速使用
new CircleProgress('#demoProgress1', {
max: 100,
value: 20
});
});
</script>
```
## 6.7.2.全部參數 :id=option
參數名稱 | 說明 | 默認值
:--- | :--- | :---
max | 最大值 |
value | 當前值 |
clockwise | 是否順時針方向 | true
startAngle | 起始角度 | 0
textFormat | 文字樣式 |
**文字樣式：**
- vertical   垂直
- percent   百分比
- value   只顯示值
- valueOnCircle   值顯示在進度條上
- none   不顯示文字
**自定義文字樣式：**
```javascript
new CircleProgress('#demoProgress9', {
max: 12,
value: 9,
textFormat: function (value, max) {
return value + ' dots';
}
});
```
## 6.7.3.自定義樣式 :id=style
使用css自定義樣式：
```html
<div id="demoProgress1"></div>
<script>
layui.use(['CircleProgress'], function () {
var CircleProgress = layui.CircleProgress;
// 快速使用
new CircleProgress('#demoProgress1', {
max: 100,
value: 20,
textFormat: 'percent'
});
});
</script>
<style>
/* 進度條選中的樣式 */
#demoProgress1 .circle-progress-value {
stroke-width: 8px; /* 粗度 */
stroke: #3FDABA; /* 顏色 */
}
/* 進度條未選中的樣式 */
#demoProgress1 .circle-progress-circle {
stroke-width: 6px;
stroke: #E0FAF1;
}
</style>
```
> 此插件是使用svg實現的，想要實現更豐富的樣式，可先了解下svg
