Elegant Circle Progress Indicator – vue-ellipse-progress

Just another Vue.js component to create an elegant, animated, SVG based, circular progress bars.

How to use it:

1. Import and register the vue-ellipse-progress component.

import VueEllipseProgress from 'vue-ellipse-progress';
Vue.use(VueEllipseProgress);

2. Add the vue-ellipse-progress to the app.

<vue-ellipse-progress :progress="progress"/>

3. Config the circular progress bar with the following props.

data: {
  type: Array,
  required: false,
  default: () => [],
},
progress: {
  type: Number,
  require: true,
  validator: (val) => val >= 0 && val <= 100,
},
legendValue: {
  type: Number,
  required: false,
},
size: {
  type: Number,
  required: false,
  default: 200,
  validator: (value) => value >= 0,
},
thickness: {
  type: [Number, String],
  required: false,
  default: "5%",
  validator: (value) => parseFloat(value) >= 0,
},
emptyThickness: {
  type: [Number, String],
  required: false,
  default: "5%",
  validator: (value) => parseFloat(value) >= 0,
},
line: {
  type: String,
  required: false,
  default: "round",
  validator: (value) => ["round", "butt", "square"].includes(value),
},
lineMode: {
  type: String,
  required: false,
  default: "normal",
  validator: (value) => {
    const lineModeConfig = value.split(" ");
    const isValidType = ["normal", "out", "out-over", "in", "in-over", "top", "bottom"].includes(lineModeConfig[0]);
    const isValidOffset = lineModeConfig[1] ? !Number.isNaN(parseFloat(lineModeConfig[1])) : true;
    return isValidType && isValidOffset;
  },
},
color: colorConfig("#3f79ff"),
emptyColor: colorConfig("#e6e9f0"),
colorFill: colorConfig(),
emptyColorFill: colorConfig(),
fontSize: {
  type: String,
  required: false,
},
fontColor: {
  type: String,
  required: false,
},
animation: {
  type: String,
  required: false,
  default: "default 1000 400",
  validator: (value) => {
    const config = value.split(" ");
    const isValidType = ["default", "rs", "loop", "reverse", "bounce"].some((val) => val === config[0]);
    const isValidDuration = config[1] ? parseFloat(config[1]) > 0 : true;
    const isValidDelay = config[2] ? parseFloat(config[2]) > 0 : true;
    return isValidType && isValidDuration && isValidDelay;
  },
},
legend: {
  type: Boolean,
  required: false,
  default: true,
},
legendClass: {
  type: String,
  required: false,
},
angle: {
  type: [String, Number],
  required: false,
  default: -90,
},
loading: {
  type: Boolean,
  required: false,
  default: false,
},
noData: {
  type: Boolean,
  required: false,
  default: false,
},
dash: {
  type: String,
  required: false,
  default: "",
  validator: (value) => {
    if (value.startsWith("strict")) {
      const config = value.split(" ");
      return parseFloat(config[1]) >= 0 && parseFloat(config[2]) >= 0;
    }
    return true;
  },
},
half: {
  type: Boolean,
  required: false,
  default: false,
},
gap: {
  type: Number,
  required: false,
  default: 0,
  validator: (val) => !Number.isNaN(parseInt(val, 10)),
},
determinate: {
  type: Boolean,
  required: false,
  default: false,
},
dot: {
  type: [String, Number, Object],
  required: false,
  default: 0,
  validator: (value) => {
    if (typeof value === "object") {
      if (value.size !== undefined) {
        return !Number.isNaN(parseFloat(value.size));
      }
      return false;
    }
    return !Number.isNaN(parseFloat(value));
  },
},

Preview:

Changelog:

v2.1.1 (01/18/2022)

• Changed plugin export for non-plugin-version

v2.1.0 (01/15/2022)

• Smooth legend transition between states
• loader now supports duration property to control animation duration
• Bugfixes

v2.0.0 (05/22/2021)

• Updated for Vue 3

v1.3.0 (09/20/2020)

• The release contains important fixes concerning compatibility with IOS ans MacOS and adds the possibility to format the legend of the circle.

v1.2.0 (08/22/2020)

• The reverse property lets the progress circle fill counterclockwise
• progress now accepts also negative values in the range [-100, 100]
• added support for usage over CDN
• fixes and improvements

v1.1.1 (07/12/2020)

• This release replaces count-up.js with own implementation. The library is now dependency-free.
• Better legendValue decimals handling and , as delimiter

Download Details:

Author: setaman

Live Demo: https://vue-ellipse-progress-demo.netlify.app/#/

Download Link: https://github.com/setaman/vue-ellipse-progress/archive/master.zip

Official Website: https://github.com/setaman/vue-ellipse-progress

Install & Download:

# NPM
$ npm install vue-ellipse-progress --save