Vue 3 的轻量级但高度可定制的圆形进度条组件。

安装和下载：

# Yarn
$ yarn add vue3-circle-progress

# NPM
$ npm i vue3-circle-progress

使用

1.导入并注册圆圈进度组件。

import "vue3-circle-progress/dist/circle-progress.css";
import CircleProgress from "vue3-circle-progress";

export default {
  components: {CircleProgress}
}

2. 将circle-progress组件添加到应用程序并指定百分比如下：

<circle-progress :percent="50" />

3. 使用以下道具和选项自定义圆圈进度。

size: {
  type: Number,
  default: 180
},
borderWidth: {
  type: Number,
  default: 15
},
borderBgWidth: {
  type: Number,
  default: 15
},
fillColor: {
  type: String,
  default: "#288feb"
},
emptyColor: {
  type: String,
  default: "#dddddd"
},
background: {
  type: String,
  default: "none"
},
className: {
  type: String,
  default: ""
},
percent: {
  type: Number,
  default: 50
},
linecap: {
  type: String,
  default: "round"
},
transition: {
  type: Number,
  default: 400
},
isGradient: {
  type: Boolean,
  default: false
},
/* 
  angle: 0,
  startColor: '#ff0000',
  stopColor: '#ffff00'
*/
gradient: {
  type: Object,
  default: () => GRADIENT
},
isShadow: {
  type: Boolean,
  default: false
},
/* 
  inset: false,
  vertical: 3,
  horizontal: 0,
  blur: 0,
  opacity: .4,
  color: '#000000'
*/
shadow: {
  type: Object,
  default: () => SHADOW
},
isBgShadow: {
  type: Boolean,
  default: false
},
bgShadow: {
  type: Object,
  default: () => BG_SHADOW
},
viewport: {
  type: Boolean,
  default: false
},
onViewport: {
  type: Function
},
class: {
  type: String,
  default: ""
},
showPercent: {
  type: Boolean,
  default: false
}