quark-progressloop v1.0.0

ProgressLoop 环形进度条

以环形方式展示进度完成情况

使用方法

安装quark-progressloop

npm i quark-progressloop

在文件中引入quark-progressloop

import QuarkProgressloop from 'quark-progressloop';

基础用法

<quark-progressloop :percent="30"  lineColor="#3cbd3c" :radius="50" :lineWidth="12" :bgWidth="10"></quark-progressloop>

显示文案

文案样式可自定义

<quark-progressloop :percent="50" >
    <span style="font-size:24px">50%</span>
</quark-progressloop>

渐变颜色

进度动画

<quark-progressloop :percent="100"  lineColor="#3cbd3c" :radius="50" :lineWidth="12" :bgWidth="10" :duration="1000" @progress="changeText">
    <span style="font-size:24px">{{text}}%</span>
</quark-progressloop>
<script>
export default {
    data(){
        return{
            text:0
        }
    },
    methods:{
        changeText(rate) {
            this.text = Math.ceil(rate);
        }
    }
}
</script>

Prop