vue-circle-progress

a vue component of circle progress bar

install

1$ npm i vue-circle-xprogress -s

use npm

1  import Vue from 'Vue'
2  import CircleProgress from 'vue-circle-xprogress'
3  import  'vue-circle-progress/dist/circle-progress.css'
4  Vue.use(CircleProgress)

use cdn

1<script src="https://cdn.jsdelivr.net/npm/vue-circle-xprogress@0.0.1/dist/circle-progress.min.js"></script>
2<link ref="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-circle-xprogress@0.0.1/dist/circle-progress.css">

live example

code open

start

1<template>
2  <circle-progress percent="30" size="60">
3      <p>30</p>
4    </circle-progress>
5</template>
6<script>
7</script>

circle-progress Component

props

param	description	type	default
percent	进度百分比 0-100	Number	0
size	大小	Number	120
staticWidth	背景圆环 stroke 宽度	String	6
staticColor	背景圆环 颜色	String	#E8EAED
dynamicWidth	圆环 stroke 宽度	Number	7
dynamicColor	圆环 颜色	String	#3864EC
dynamicShape	圆环边角形状 round,square	String	round
dashboard	仪表盘	Boolean	false