Easy Circular Progress
made with Vuejs

Easy Circular Progress

这是一个具有计数功能的简单圆形进度显示组件。

相关问答
暂无相关问题
查看全部
简介及使用教程

这是一个具有计数功能的简单圆形进度显示组件。通过Props,我们可以设置颜色、宽度、大小、进度速度以及进度的显示精度。

安装

Npm

npm install easy-circular-progress --save

yarn

yarn add easy-circular-progress 

使用

在组件中直接引入Progress组件,并注册

import Progress from "easy-circular-progress/index.vue";

export default {
  name: "app",
  components: {
    Progress
  }
};

然后在你的组件中直接使用:

<Progress strokeColor="#FF00AA" value="16.88">
      <template v-slot:footer>
        <b>More Color</b>
      </template>
    </Progress>

示例

index.gif

源码如下:

<Progress value="16.88">
      <!-- <template v-slot:footer>
        <b>goood</b>
      </template>-->
    </Progress>
    <Progress strokeColor="#FF00AA" value="16.88">
      <template v-slot:footer>
        <b>More Color</b>
      </template>
    </Progress>

    <Progress :radius="50" :strokeWidth="10" value="86.12">
      <template v-slot:footer>
        <b>Bolder & Bigger One</b>
      </template>
    </Progress>

    <Progress
      :transitionDuration="5000"
      :radius="50"
      :strokeWidth="10"
      value="86.12"
    >
      <template v-slot:footer>
        <b>Slow One</b>
      </template>
    </Progress>

    <Progress
      :transitionDuration="5000"
      :radius="55"
      :strokeWidth="10"
      value="86.12567"
    >
      <template v-slot:footer>
        <b>More Precise</b>
      </template>
    </Progress>

    <Progress :transitionDuration="5000" :radius="55" :strokeWidth="10" value="86.12567">
      <div class="content">hello</div>
      <template v-slot:footer>
        <b>More Precise</b>
      </template>
    </Progress>
作者

Vincent Guo

相关项目

这是一个使用Vue.js的加载Spinner的集合。
这是一个基于Vue.js的SVG占位符加载。
这是一个基于Vue2的懒加载组件。
这个是基于Vue.js的简单的svg进度条,基于 circles项目二次开发。