Preview

npm install arc-progress -S

If you want to add arc-progress files in your project for use <script>, you can click and download ️arc-progress.min.js file.

<div id="progress-container"></div>

<script>
  const customText = [{text: '%', size: '12px', color: '#000', x: 142, y:102}];

  const arcProgress = new ArcProgress({
    el: '#progress-container',
    progress: .68,
    speed: 5,
    value: '5439.92',
    size: 200,
    customText,
    observer(e, t) {
      console.log('observer the animation', e, t);
    },
    animationEnd(e) {
      console.log('the animation is end', e);
    }
  });
</script>

If used in the React, can use the react-arc-progress component.

If used in the VUE, instantiate in the life cycle of can get real DOM node.

in the Vue code:

<template>
  <div>
    <div id="progress-container" />
  </div>
</template>

<script>
  import ArcProgress from 'arc-progress';

  export default {
    data () {
      return {
        customText: [{text: '%', size: '12px', color: '#000', x: 142, y:102}]
      }
    },
    mounted() {
      arcProgress = new ArcProgress({
        el: '#progress-container',
        progress: .68,
        speed: 5,
        value: '5439.92',
        size: 200,
        customText: this.customText,
        observer(e, t) {
          console.log('observer the animation', e, t);
        },
        animationEnd(e) {
          console.log('the animation is end', e);
        }
      });
    }
  }
</script>

In the instantiation, pass the following optional option

Method that can be used after instantiation

The start point and end point of the arc are marked as show in the picture, direction is clockwise. If you want to draw a circular progress bar, you can set arcStart to 90, arcEnd to 270. Or if you want to draw a semicircle, you can set arcStart'to180', arcEnd to 360. Start and end angles can be adjusted as needed.

fillColor is the progress bar color of the filled part, which can be passed in as its defined color(for example #ffee3c). If want used the gradient, the option need to be set to the object type, such as {gradient: [color 1, color2, color 2]}, it will be have three colors of the radial gradients. If you want use image filled, you need to set the option to the object type, the format is {image: url}, and the url is address of the picture.

Set the style of the text content, which needs to be the object type. The optional content is as follows.

customText option to custom the some text contents, It is an array type. You can define more than one text. Each usage is consistent with the textStyle option, but it have one more item is text, this is used show you definition text content.