e-circle-progress

A beautiful progress button components with vue.

Build Setup

# install dependencies
npm install
# If npm installation is slow, you can usenpm install --registry=https://registry.npm.taobao.org 推荐

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

examples

imgs

demos

use

You can directly use js and write the corresponding custom tag after importing. For details, please refer to the abovedemos

 <script src="https://unpkg.com/e-circle-progress"></script>
<e-circle-progress :during="20" :pv="pv1"  color="#f01250" ></e-circle-progress>
<e-circle-progress :during="10" :pv="pv2" color="#f00" :font-size="40" :width="100"  text-color="#68d7c6"></e-circle-progress>
<e-circle-progress :during="10" :pv="pv3"  :font-size="100" :width="200"  text-color="#898579" text-bg-color="#fff" :bold="20" color="#fd625e"></e-circle-progress>
<e-circle-progress :during="10" :pv="99"  :width="150"  text-color="#898579" text-bg-color="#fff" :bold="5" color="#f01250"></e-circle-progress>
  1. vue single file format

  // You can use it by directly importing the corresponding components in the vue single file
  import eCircleProgress from 'e-circle-progress';

  //components:{eCircleProgress}
  // html
  <e-circle-progress :during="10" :pv="pv2" color="#f00" :font-size="40" :width="100"  text-color="#68d7c6"></e-circle-progress>

Reference

Below are the reference links:

No. Link
1. Read more here.
2. Follow code author here.