vue-circle-progress

a vue component of circle progress bar

install

$ npm i vue-circle-xprogress -s

use npm

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

use cdn

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/circle-progress.min.js"></script>
<link ref="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/circle-progress.css">

live example

code open

start

<template>
  <circle-progress percent="30" size="60">
      <p>30</p>
    </circle-progress>
</template>
<script>
</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 |