A Vue.js component to create beautiful animated circular progress bars. https://vue-ellipse-progress-demo.netlify.com/

Overview

vue-ellipse-progress

npm Known Vulnerabilities License: MIT contributions welcome Build Status

forthebadge forthebadge forthebadge

A dependency-free Vue.js plugin to create beautiful and animated circular progress bars, implemented with SVG. The purpose of this plugin is to combine the best properties of other available libraries and to add unique features, delivered in a simple to use component with friendly interface.

With the available options you can create simple circles very quickly. But playing with the combinations of props and with a bit of imagination you can create really exciting things.

🚩 Already upgraded to Vue 3? Great! Feel free to try out the latest v2 updates. Currently v2 is in the beta stage, but it is a few tests away from stable release and should be finished right when the Vue 3 ecosystem gets stable.

❕ Take a look at some interesting examples on the Demo page ❕

Component demo

Installation

Use your package manager or CDN to install and initialize the component.

NPM

Install the library via npm:

npm i vue-ellipse-progress

The component is provided as a Vue.js plugin. So just initialize it in your main.js:

import VueEllipseProgress from 'vue-ellipse-progress';

Vue.use(VueEllipseProgress);

// Vue.use(VueEllipseProgress, "vep"); you can define a name and use the plugin like <vep/>

CDN

Use this option where you have a global Vue.js instance available. You can customize and get the bundled and minified component from JSDelivr. Just add the following line to your HTML and start using the component, nothing more is required:

<script src="https://cdn.jsdelivr.net/npm/vue-ellipse-progress/dist/vue-ellipse-progress.umd.min.js"></script>

Usage

After you have initialized the component, use it everywhere you want in your application:

<vue-ellipse-progress 
  :data="circles"                    
  :progress="progress"
  :angle="-90"
  color="blue"
  :colorFill="colorFillGradient"
  emptyColor="#8ec5fc"
  :emptyColorFill="emptyColorFillGradient"                      
  :size="300"
  :thickness="10"
  emptyThickness="10%"
  lineMode="in 10"
  :legend="true"
  :legendValue="180"
  :legendFormatter="({currentValue}) => new Intl.NumberFormat('de-DE').format(currentValue)"
  legendClass="legend-custom-style"
  dash="60 0.9"
  animation="reverse 700 400"
  :noData="false"
  :loading="false"                      
  fontColor="white"
  :half="false"
  :gap="10"
  dot="10 blue"
  reverse
  fontSize="5rem">
  
  <span slot="legend-value">/200</span>
  <p slot="legend-caption">GOOD JOB</p>
  
</vue-ellipse-progress>

Options

You are ready to go with just following line:

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

The progress is the only required property. However, in order to create unique circles that match your design needs, you can use all the properties explained below.

This table below provides a quick overview over all available options. To gain more information in general and concerning the creation of exclusive circles please read below the table.

❕ Also make sure to check slot options

Prop Type Values Default
progress Number [-100, 100]
size Number >=0 200
line String "round | square | butt" "round"
thickness Number | String >=0 as Number or percent value as String "5%"
lineMode String "normal | out | out-over | in | in-over | top | bottom [offset]" "normal 0"
emptyThickness Number | String >=0 as Number or percent value as String "5%"
color String | Object any color as String or Object to specify gradient (see details) "#3f79ff"
colorFill String | Object same as color "transparent"
emptyColor String | Object same as color "#e6e9f0"
emptyColorFill String | Object same as color "transparent"
legend Boolean true
legendValue Number | String any number, accepts a . or "," as decimals delimiter
legendFormatter npm Function Function that returns formatted value
animation String "default | rs | loop | reverse | bounce [duration delay]" "default 1000 400"
loading Boolean false
determinate Boolean false
noData Boolean false
angle Number any Number -90
fontSize String any valid CSS value "1rem"
fontColor String any valid CSS value "gray"
legendClass String any
dash String "[strict] count spacing"
half Boolean false
gap Number any Number that defines the gap between multiple circles in pixel 0
dot String | Number | Object Accepts size, color and other styles as Number, descriptive string "10% red" or object {size : 10, backgroundColor: "red", widht: "2px", borderRadius: "5px" ...} 0
reverse npm Boolean false
data Array defines multiple circles, takes as values Objects with almost all props defined above

  • progress

Animated: ✔️

Is any Number in range [-100, 100] (including decimals). This property defines the filled area from progress circle line in percent. progress is animated and counts up or down on any value changes with duration defined in animation.duration property. The progress is shown by default as the legend in the middle of the circle.

npm Set a negative value to fill the progress counterclockwise. Alternative you can use reverse.

Example: 📜
<vue-ellipse-progress :progress="myProgress" />
...
this.myProgress = 55.5;
this.myProgress = this.tasksDone * 100 / maxTasks; // the percentage of done tasks

❗ The progress is always used to fill the progress circle line. So you cannot customize this value, it should be always in the range [-100, 100] and not valid Numbers lead to noData state. For customization purpose please use legendValue and take a look at legendFormatter.

If legendValue is defined the progress will NOT be displayed as circle legend.


  • size

Animated: ✔️

Is any number from >=0. It defines the width and height of the circle. The calculation of the circumference of the circle depends on the properties lineMode, thickness, emptyThickness and dot, so the circle never exceeds the size value!

❗ Check lineMode property to understand how the progress circle behaves depending on the line mode and offset.


  • line

Animated: ✔️

Is a string value from round | square | butt. Defines the progress circle line cap. Internally is used the CSS property stroke-linecap.

Example: 📜

line="round"


  • thickness

Animated: ✔️

Is any number or percent value >=0. It defines the progress circle line thickness. If you define the value in percent, the thickness will be calculated in relation to size. Internally is used the CSS property stroke-width.


  • lineMode

Animated: ✔️

Descriptive string in form "mode [offset]" that defines how the progress line is aligned in relation to empty line. The first value ist the mode and the optional second is the offset. You can understand the modes as the presets that help you to align lines as you want to.

  • mode:

    • normal: this is the default value and both lines are aligned at the base line (centered).
    • in: the progress line is inside the empty circle
    • in-over: the progress line is both inside the empty circle and overlaps the empty circle
    • out: the progress line is outside the empty circle
    • out-over: the progress line is both outside the empty circle and overlaps the empty circle
    • bottom: the progress line is aligned at the bottom of the empty circle
    • top: the progress line is aligned at the top of the empty circle
  • offset: is any negative or positive number and defines the distance between the progress and empty lines. It can be only combined with the in and out modes

Example: 📜

Let's take a look at few examples

line-mode="in 10" line-mode="in 10" line-mode="out 10" line-mode="out 15"

As you can see the second and fourth examples are similar to the modes bottom and top. Only with the modes in and out and the offset you can achieve the same result. But the provided modes like a presets take care about annoying calculations and do the job for you.


  • emptyThickness

Animated: ✔️

Is any number or percent value >=0. It defines the empty circle line thickness. If you define the value in percent, thickness will be calculated in relation to size. Internally is used the CSS property stroke-width.


  • color

Animated: ✔️

Defines the color of progress circle line. Is any CSS color like #123 or lime or an object that defines the gradient.

  • color="#3f79ff" - as String

  • :color="{ colors [, radial ]}" - as Object

    • radial - default false. Defines whether the gradient is radial or linear
    • colors - Array that contains the gradient colors as objects { color: "#6546f7", offset: "10%" [, opacity: 1] }
Example: 📜

Now you are ready for an example:

:color="gradient"
gradient: {
    radial: false,
    colors: [
      {
        color: '#6546f7',
        offset: "0",
        opacity: '1',
      },
      {
        color: 'lime',
        offset: "100",
        opacity: '0.6',
      },
    ]
  }

gradient demo


  • colorFill

Animated: ✔️

Defines the fill color of the progress circle. Takes the same value as color


  • emptyColor

Animated: ✔️

Defines the color of the empty circle line. Takes the same value as color


  • emptyColorFill

Animated: ✔️

Defines the fill color of the empty circle. Takes the same value as color


  • legend

Is a Boolean. It defines whether the progress or from you defined legendValue is displayed as the legend of the circle.


  • legendValue

Animated: ✔️

Is any Number or String. Use this property if you want to show progress value as the legend of the circle that is not in the range [-100, 100]. If defined, legendValue will replace progress as the circle legend! You can set any precision of the decimal numbers. If the prop is defined as a string, you can specify the "," as decimals delimiter (e.g "123,123" for german numbers), apart from this the value must generally be a valid JavaScript Number. For more customization possibilities please use legendFormatter or scoped slot.

Example: 📜

Let's say you need to display a rating from 0 to 5 of a product with 3.5 stars. Setting the progress to 3.5 will fill the circle to 3.5 percent, and this is not what we need, since we want to display the percentage of 5 as progress. At this point we need an additional property legendValue. We can show the product rating like in the following example:

<vue-ellipse-progress :progress="progress" :legend-value="rating" />
...
this.rating = 3.5;
this.progress = this.rating * 100 / 5; // the rating percentage

Now you can display custom progress value that still animated and circle progress fills properly!

<vue-ellipse-progress legend-value="345,12345" /> // set "," as delimiter defining the value as string

❗ note that legendValue replaces progress as circle legend but not vice versa.


  • legendFormatter

npm

Is a Function that must return your custom formatted value. The function takes counter properties object as argument and is called on every tick of the counter. Here the formatting of legendValue or progress is completely up to you and you have full freedom to adjust the presentation to your needs. The function can return any value, even HTML.

❕ alternatively you can use scoped slot for custom formatting.

Example: 📜

Let's see how it works. The function takes counter properties object as argument that you can use to define custom formatting. currentValue is the most relevant value, as it is the actual value at specific counter tick. The return value will be displayed as the legend of the circle.

const myFormatter = ({ currentValue, currentRawValue, duration, previousCountStepValue, start, end, difference, oneStepDifference, startTime, elapsed }) => {
  return new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(currentValue); 
}

You can also return HTML:

const myFormatter = ({ currentValue }) => {
     return `
        <span style="font-weight: bold; font-size: 1.6rem">${new Intl.NumberFormat("de-DE").format(currentValue)}</span>
        <span>€</span>
      `;
    }

Finally, set your formatter as prop:

<vue-ellipse-progress :legend-formatter="myFormatter"/>
<!-- shorter version if you wish-->
<vue-ellipse-progress :legend-formatter="({ currentValue }) => `My Format ${currentValue}`"/>

  • animation

Descriptive string in form "type [duration delay]" that defines the initial animation of progress circle line filling. type is one from predefined animations and the optional duration and delay are number values. Note that the order is important and that you can only define the delay after duration.

  • type - is one of the predefined animations: default | rs | reverse | bounce| loop
  • duration - number in milliseconds, default 1000
  • delay - number in milliseconds, default 400
Example: 📜
animation="rs 700 200"
animation="bounce 1000"

  • loading

Forces loading state. The component provides an indeterminate loading state for the case that your data is not available immediately. With this property set to true you can use the component as the indeterminate progress.


  • determinate

Provides a determinate loading state that indicates that your data loading is still in progress but allows to show the progress.


  • noData

Animated: ✔️

Forces no data state. The component provides a no data state for the case that your data is not available. The circle progress is still empty.

❗ The component will take the no data state even if you provide an invalid progress value


  • angle

Animated: ✔️

Is any number. It defines the starting point of the progress circle line.


  • fontSize

Animated: ✔️

Is any valid CSS size value. It defines the font size of the circle legend. You will have to use legendClass if you want to apply more specific styles.


  • fontColor

Animated: ✔️

Is any valid CSS color value. It defines the color of the circle legend. You will have to use legendClass if you want to apply more specific styles.


  • legendClass

Adds class to the circles legend to give you the possibility to style it.


  • dash

Animated: ✔️

Descriptive string in form "[strict] count spacing" that adds dashed empty progress line. This property provides the optional strict mode. In this mode you can define the explicit number of dashes as count with the given relative spacing as number in range >= 0 and < 1. Without strict the default behavior of the SVG stroke-dasharray property is used, where the size and spacings of the dashes are defined.

Example: 📜

dash="strict 60 0.5" - 60 dashes with 0.5 relative spacing

dash="10 10" - 10 pixels big dashes with 10 pixels spacing, the number of dashes depends on the empty circle circumference


  • half

Boolean value that specifies the type of the circle. If it is set to true, only the half of the circle will be drawn like a gauge chart.

Example: 📜

half circle example


  • gap

Animated: ✔️

Defines the gap in pixels from one circle to the previous circle. It will be applied only if data prop is used.

Example: 📜
<vue-ellipse-progress :gap="10"/>

  • dot

Animated: ✔️

The dot property lets you define a point indicator at the end of the progress line. You have a lot of freedom to customize the dot using a Number, descriptive String, or an Object to inject any CSS styles.

Number: :dot="10" - specifies a round dot with 10px width and height and default #713dfd color

Descriptive string: dot="size [color]" - size can be just a Number or a percent value like 5%, the calculation for percent values is similar to thickness and depends on the size. color is optional and lets you quickly define the color of the dot. The order of properties is important for parsing the String and you can set the color only if the size is defined.

Object: :dot="{ size: Number | String [, any CSS inline style with Vue syntax] }" - to customize the point, you can define the prop as an Object. size is required and can be just a Number or a String to define a percent value. Only defining the prop as an Object you have the possibility to add any styles to the dot you want to, using Vue syntax for defining inline styles, you can even completely break the positioning of the dot, if you need. You cannot override the height of the dot since it is important for internal calculation and must be controllable.

Example: 📜

The examples will provide more clarity

:dot="10" // just a Number defining size in pixel
dot="10" // the same as above
dot="10%" // 10% from the circle size will be converted to pixel
dot="5% red" // adds red dot
// defines same dot as above
:dot={
  size: "5%", // required
  backgroundColor: "red", // add any inline CSS using Vue syntax
  left: "10px", // you can even move the dot, but it is not recommended
}

dot example


  • reverse

npm

Is a Boolean. reverse prop flips the circle, and the progress circle fills counterclockwise. Alternative you can just set a negative value for progress.

Example: 📜
<vue-ellipse-progress reverse />

  • data

You can specify 2 or more circles as objects in an array as data. For each circle you can use almost every available property. It is not necessary to specify all properties, they will be merged with global props and the specified props will overwrite the global. The circles are rendered inside each other.

❗ Excluded props: lineMode, emptyThickness, legend. These properties will be ignored, if data is specified. The legend of this circle is also not shown.

Example: 📜
<!-- this props are applied to all circles, if not overwritten in "data"-->
<vue-ellipse-progress color="blue" animation="loop 500" ...  :data="data"/>

data: [
  { 
    progress: 50, // required for each circle
    color: "red",  // will overwrite global progress color
    ...           // other options will be merged with global
  },
  { 
    progress: 50, // required for each circle
    animation: "rs 1500 500"  // you can set almost any option that will be specific to this circle
  }
}

multiple circles demo


Slot options

  • default

Use this slot, if you want to customize the presentation of the circle legend and make a use of the animated counter, so your formatting still animated. This works similar to the legendFormatter and is just an alternative way to provide a custom format. You can access animated counter properties through the scoped slot props and adjust the presentation of the legend to your needs.

<vue-ellipse-progress :progress="50">
  <template v-slot:default="{ counterTick }">
    <span style="font-weight: bold; font-size: 1.6rem; color: green;">
      {{ myFormatter(counterTick.currentValue) }}
    </span>
  </template>
</vue-ellipse-progress>
  • legend-value

In this slot you can put an additional element that you want to display beside the progress

  • legend-caption

In this slot you can put any HTML and style it on your own. This slot is aligned below the progress.

Example: 📜

This code ...

<vue-ellipse-progress ....>
  
<template v-slot:legend-value>
  <span slot="legend-value">/200</span>
</template>
<template v-slot:legend-caption>
  <p slot="legend-caption">TASKS DONE</p>
</template>
  
</vue-ellipse-progress>

... produces following result. The slots are marked corresponding:

slot example


Compatibility

The plugin was tested in all major modern mobile and desktop browsers. It should also work properly in older browsers. In old browsers issues can arise by animations since they are implemented using CSS custom properties. Basic SVG renders even in IE 11.

IE / Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
Vivaldi
Vivaldi
Electron
Electron
Nuxt.js
Nuxt.js
✅ ✅ ✅ ✅ ✅ ✅ ✅ ✅

Development

The development always happens in dev branch. You'll find all the latest updates there. dev will only be merged into the master when all unit tests have been passed, builds are successful, documentation is updated and functionality is verified on the demo page. Before that all changes remain in beta.

Run for local development

The project was initialized with Vue CLI. Execute the following commands to start development locally:

npm i
npm run serve
Comments
  • Dot is not always stay at the end of the progress bar

    Dot is not always stay at the end of the progress bar

    I've noticed the dot is not always at the end of the progress bar (probably only when progress bar is not at constant speed). I encounters that when uploading file.

    opened by shiyu3169 5
  • ssr aware

    ssr aware

    this is related to v2.0.0

    Hi Sergej,

    love what you did with this package. so before all, thank you for sharing it with us.

    i am using this plugin with vitesse and ssg/ssr. i had to use a dynamic import behind a isClient condition because otherwise the ssr build breaks with document is not defined.

    couldn't find in this branch exactly where in code this happens. could you help me out finding it so that maybe i can submit a PR to make it work without this.

    thanks, Cezar

    enhancement stale 
    opened by cezarneaga 4
  • empty progress

    empty progress

    I would like the circle progress to be completely empty when set progress to 0, how would i do that? since there is a little dot of progress when 0 progress.

    question 
    opened by nbhkph 4
  • 'document is not defined' when using with nuxt.js

    'document is not defined' when using with nuxt.js

    I'm trying to use this with nuxt.js I made a plugin file with the following content:

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

    and get the document is not defined error. I've tried putting it in tag but still getting the same error. Any fix?

    opened by alitnk 4
  • Colors shares across different component

    Colors shares across different component

    I can't get my progress bars to have unique gradients, it's always the first component that loads that dictates the colors of all of my other progress bars. Any ideas on how I can have unique colors across different instances of ve-progress?

    This is how I am specifying the colors:

    ellipseGradient: {
            radial: false,
            colors: [
              {
                color: this.type === "call" ? "#00FF97" : "#FF009B",
                offset: "0",
                opacity: "1"
              },
              {
                color: this.type === "call" ? "#00FFC8" : "#FF48C4",
                offset: "100",
                opacity: "1"
              }
            ]
      },
    ellipseEmpty: {
            colors: [
              {
                color: this.type === "call" ? "#00FF97" : "#FF009B",
                opacity: "0.35"
              }
            ]
      }
    
    bug 
    opened by samuveth 4
  • NumberFormat

    NumberFormat

    How can we display digits separating thousands in legendValue like this : new Intl.NumberFormat ('fr-FR'). format (Number)

    100000 => display 1 00 000

    enhancement 
    opened by mjezegou 4
  • Fix legendHeight setter in mount

    Fix legendHeight setter in mount

    When VueEllipseProgress mounts, it might have legend disabled, in which case the legendHeight property should be set to 0 rather than trying to access the nonexistent legend template ref.

    Thanks for your contribution!

    By contributing to this project you agree to the contribution rules.

    Quick checklist for code changes:

    • [ ] Created a new branch based on dev
    • [ ] All test and checks passed
    • [ ] No linting errors
    • [ ] New tests added (if necessary)
    • [ ] Docs updated (if necessary)

    you can delete the above text, after all checks have passed


    bug 
    opened by ChaDonSom 3
  • Can i define `:progress = (value)`

    Can i define `:progress = (value)`

    I need to be defined :progress = (VALUE) as data. How can I please help me

    https://stackoverflow.com/questions/70200039/vuejs-binding-progress-circle-with-text-active-class

    opened by Keremunce 3
  • "export 'default' (imported as 'VueEllipseProgress') was not found in 'vue-ellipse-progress'

    Hello! I have been trying to use your Vue component. But it seems to fail at compilation.

    This is the error I got. I am using Docker with Rails & Webpack by the way. As instructed in the docs, I have used the following lines to import the Vue component.

    // index.js
    
    ...
    
    import VueEllipseProgress from 'vue-ellipse-progress';
    Vue.use(VueEllipseProgress)
    
    import Notifications from 'vue-notification'
    Vue.use(Notifications)
    
    ...
    
    ERROR in ./app/frontend/javascripts/classroom/index.js 7:8-26
    app_1      | 01:32:47 webpack.1 | "export 'default' (imported as 'VueEllipseProgress') was not found in 'vue-ellipse-progress'
    app_1      | 01:32:47 webpack.1 |     at HarmonyImportSpecifierDependency._getErrors (/app/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:109:11)
    app_1      | 01:32:47 webpack.1 |     at HarmonyImportSpecifierDependency.getErrors (/app/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
    app_1      | 01:32:47 webpack.1 |     at Compilation.reportDependencyErrorsAndWarnings (/app/node_modules/webpack/lib/Compilation.js:1463:22)
    app_1      | 01:32:47 webpack.1 |     at hooks.finishModules.callAsync.err (/app/node_modules/webpack/lib/Compilation.js:1258:10)
    app_1      | 01:32:47 webpack.1 |     at AsyncSeriesHook.eval [as callAsync] (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    app_1      | 01:32:47 webpack.1 |     at AsyncSeriesHook.lazyCompileHook (/app/node_modules/tapable/lib/Hook.js:154:20)
    app_1      | 01:32:47 webpack.1 |     at Compilation.finish (/app/node_modules/webpack/lib/Compilation.js:1253:28)
    app_1      | 01:32:47 webpack.1 |     at hooks.make.callAsync.err (/app/node_modules/webpack/lib/Compiler.js:672:17)
    app_1      | 01:32:47 webpack.1 |     at _done (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    app_1      | 01:32:47 webpack.1 |     at _err2 (eval at create (/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:44:22)
    app_1      | 01:32:47 webpack.1 |     at _addModuleChain (/app/node_modules/webpack/lib/Compilation.js:1185:12)
    app_1      | 01:32:47 webpack.1 |     at processModuleDependencies.err (/app/node_modules/webpack/lib/Compilation.js:1097:9)
    app_1      | 01:32:47 webpack.1 |     at process._tickCallback (internal/process/next_tick.js:61:11)
    app_1      | 01:32:47 webpack.1 | ℹ 「wdm」: Failed to compile.
    

    This is the content of my package.json.

    {
      "name": "xxxxxx_app",
      "private": true,
      "dependencies": {
        "axios": "^0.19.2",
        "vue-notification": "^1.3.20",
        "webpack-dev-server": "^3.11.0",
        "@rails/actioncable": "^6.0.0",
        "@rails/activestorage": "^6.0.0",
        "@rails/ujs": "^6.0.0",
        "@rails/webpacker": "4.2.2",
        "turbolinks": "^5.2.0",
        "v-click-outside": "^3.0.1",
        "vue": "^2.6.11",
        "vue-ellipse-progress": "1.2.0",
        "vue-loader": "^15.9.3",
        "vue-router": "^3.3.4",
        "vue-template-compiler": "^2.6.11",
        "vuex": "^3.5.1",
        "@lysyi3m/json-api-normalizer": "^1.4.2"
      },
      "version": "0.1.0",
      "devDependencies": {
    
      }
    }
    

    And inside my yarn.lock file.

    [email protected]:
      version "1.2.0"
      resolved "https://registry.yarnpkg.com/vue-ellipse-progress/-/vue-ellipse-progress-1.2.0.tgz#a8e21211885aba4ef82c5be455a5520915e13a59"
      integrity sha512-9qWrFey4rkJU1yUVFlfIte5fy0+1bZT6XBfNvqOAllqxP8y744teI76auFoDVrM9HHHjnR1O+QY/kQjwWZH+5g==
    

    Is there anything I did wrong? Thank you very much!

    opened by tonystrawberry 3
  • Usage with vue3 + composition API

    Usage with vue3 + composition API

    I'm trying to use your component on my Vue3 app with composition API and I'm not able to make it work even with the minimal setup.

    I've got this very simple component and stuck with the following error Uncaught (in promise) TypeError: t3.component is not a function

    <script setup>
    import VueEllipseProgress from 'vue-ellipse-progress'
    </script>
    
    <template>
        <VueEllipseProgress :progress="90"/>
    </template>
    

    What am I doing wrong ?

    bug 
    opened by dcp-dev 2
  • Create non-pluggin version of the library

    Create non-pluggin version of the library

    I would like to have the possibilities to import the library as a component or registering the component. Usage example:

    As a component:

    import VueEllipseProgress from "vue-elpispis"
    
    Vue.extend({
       name: "OterComp",
        components : {
            VueEllipseProgress,
        },
    })
    

    Registering the component:

    import VueEllipseProgress from "vue-elpispis"
    Vue.component('elipsisComponent', VueEllipseProgress);
    
    enhancement 
    opened by pngcsgta 2
  • Possibility of having gradient follow the fill of the circle?

    Possibility of having gradient follow the fill of the circle?

    Instead of having the gradient follow in an overlay manner from left->right, would it be possible to have it actually start from where the fill starts and end at 100%? Because now if you have circle fully filled, the darkest is not at 100% of the circle, but at around 75% (if gradient is left to right and the beginning of circle starts at the top). Would be nice to have a feature with gradient following the % of the circle filled and possibility of adding stops.

    Example shown below.

    image

    feature 
    opened by BumbiSit 1
  • [Feature request] Allow specifying progress bar color with CSS classes

    [Feature request] Allow specifying progress bar color with CSS classes

    I'm using TailwindCSS and for my use case I find it difficult to apply a color to the progress bar with a different color whenever a user hovers over the button in which the spinner is in.

    Regardless of the use case above it would be great to reuse already declared color classes rather than providing their CSS or hex equivalents, which are hardcoded and not CSS framework-dependent.

    feature 
    opened by DamianGlowala 1
Releases(v2.1.1)
  • v2.1.1(Apr 14, 2022)

  • v2.1.0(Jan 15, 2022)

  • v2.0.0(May 21, 2021)

    Vue 3 compatible release with new features, fixes, a lot of internal code refactorings and usability improvements. Following the current state of the Vue 3 ecosystem, the v2 is released under the next tag and will become latest with the next minor release. Until then, this version lives in the v2-dev branch. The release contains several breaking changes, introduces new options to provide more customization possibilities and makes with 150+ new tests the code base more reliable.

    npm (tag) build npm i [email protected] docs changelog

    ⚠️ Breaking Changes and migration

    • build with Vue 3, release is not compatible wit Vue 2.6 and down. The initialization process has changed

      You have to import and initialize the component in Vue 3 manner:

      import { createApp } from "vue";
      import veProgress from "vue-ellipse-progress";
      createApp(App).use(veProgress);
      

      Please note that the default plugin name has changed and you use the component like follows:

      <ve-progress />
      

      You will find more details in the installation guide

    • removed legendValue option, it is legend now

      The option legendValue just has to be renamed in legend. The old usage of legend must be renamed to hideLegend. The following code from v1:

      <vue-ellipse-progress :legend="true" :legendValue="123.56" />
      

      should look like follows:

      <ve-progress :hideLegend="false" :legend="123.56" />
      
    • old legend option renamed to hideLegend

      Just rename legend to hideLegend. Also note that you have to revert the Boolean value

    • lineMode default mode normal renamed to center

    • slot legend-value renamed to legend

    ✅ New features

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-beta.1(Feb 15, 2021)

  • v2.0.0-beta.0(Jan 5, 2021)

    A well tested Vue 3 compatible beta release with stable interface. This release introduces new features, patches, some breaking changes and a lot of internal code improvements. All previous releases are not compatible with this version. The stable v2 version is a few tests away and is actually only blocked by the [email protected] issues. Furthermore I need to ensure the backward compatibility with Vue 2.6.

    At this point this version is feature complete and no more breaking changes will be introduced. Please read the documentation to learn more details about changes. Below is an overview of important breaking changes. A detailed upgrade guide will be available later.

    • Component is build with Vue 3

    • Component initialization changed due to Vue 3 specifics, also changed the usage over CDN

    • Options changes: legendValue, legend, lineMode

    • Slots usage changed

    Source code(tar.gz)
    Source code(zip)
  • v1.3.0(Sep 19, 2020)

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

    Features

    Fixes

    • Dot reimlemented to work on IOS/MacOS (#82)
    • Fixes animations on IOS/MacOS (#86)

    Improvements

    • Tests extended
    • Documentation corrections and updates
    • Dot and Animation internals rewritten completely
    • All dependencies updated to latest versions
    Source code(tar.gz)
    Source code(zip)
  • v1.2.0(Aug 22, 2020)

    After the request in #73 reverse mode was added

    Features

    • reverse

      The reverse property lets the progress circle fill counterclockwise:

      <vue-ellipse-progress reverse />
      
    • progress now accepts also negative values in the range [-100, 100]

    • added support for usage over CDN

    Fixes and Improvements

    • Tests extended
    • Small CSS and JS refactoring
    • Documentation corrections (#77) and updates
    • Added contribution guide and PRs template!
    • All dependencies updated to latest versions
    Source code(tar.gz)
    Source code(zip)
  • v1.1.1(Jul 11, 2020)

    This release replaces count-up.js with own implementation. The library is now dependency-free!

    Fixes and Improvements

    • Replaced count-up.js (#67)
    • Better legendValue decimals handling and , as delimiter (#67)
    • Documentation improvements
    • All dependencies updated to latest versions
    Source code(tar.gz)
    Source code(zip)
  • v1.1.0(Jun 8, 2020)

    This is an important update to the previous version. This version adds dot feature and several important fixes, some of which are listed below. A lot of time has been invested in testing and improvements.

    Features

    • adds dot

      The dot property lets you define a point indicator at the end of the progress line:

      dot="10 white"
      

    Fixes and Improvements

    • Adds 100 new tests (#63)
    • Refactors internal CSS classes structure (#60 )
    • Significantly reduces the amount of by the plugin injected CSS on a site (0ee796e)
    • Documentation improvements
    • Includes many important fixes (2d56b3e, edc1d51, 500d12e, 61e4e2d, 41d45f3, 0c0e621 )
    • Several code rafactorings, optimizations, props custom validators improvements
    • All dependencies updated to latest versions
    Source code(tar.gz)
    Source code(zip)
  • v1.0.0(Apr 23, 2020)

    This release contains all features I wanted to see in the first major version and introduces breaking changes to previous versions. The next major update is planned with the release of Vue 3.0.

    New features can be added if I need them. But currently I am satisfied with the available capabilities of the library.

    Breaking Changes

    • Descriptive Interface (#43)

      After using the library for some time, I decided to simplify the interface with descriptive strings. Instead of specifying objects that are verbose for some props, they can be described using a string with a predefined structure.

      We take animation prop as example. In previous version we specified it as follows:

      :animation="{ type: 'rs', duration: 1000, delay: 500 }"
      

      🔥 Now we can just describe the animation config with a string:

      animation="rs 1000 500"
      animation="rs 1000"
      animation="rs"
      

    Features and Fixes

    • Multiple circles in one with data prop (#36)
    • Determinate loading state with determinate prop (#37)
    • Usage documentation improvements (#45, #47, #50)
    • Custom plugin name can now be defined: Vue.use(VueEllipseProgress, "my-name")
    • Unit test and corresponding fixes (#49, #52)
    • Several code rafactorings, optimizations, improvements
    • Update all dependencies to latest versions
    Source code(tar.gz)
    Source code(zip)
  • v0.20.2-beta.0(Mar 3, 2020)

  • v0.18.13(Dec 21, 2019)

  • v0.18.8(Jun 20, 2019)

Vue.js plugin that handles buttons async lock state. Demo: https://stukh.github.io/vue-promise-btn/

vue-promise-btn Example and Documentation https://STUkh.github.io/vue-promise-btn/ Features Easy-to-use API Flexible Usage Works with any tag and even

Alex 174 Dec 14, 2022
🌀 A collection of loading indicators animated with CSS for VueJS

vue-spinkit A collection of loading indicators animated with CSS for VueJS Inspiration Spinkit css animated loading react-spinkit loaders.css DEMO Ins

Chanwit Piromplad 109 Dec 15, 2022
Radial progress bar component for Vue.js

vue-radial-progress A radial progress bar component for Vue.js. Uses SVG and javascript to animate a radial progress bar with a gradient. Live Demo Re

Wyzant 470 Dec 19, 2022
SVG component to create placeholder loading, like Facebook cards loading.

SVG component to create placeholder loading, like Facebook cards loading.

EGOIST 2.9k Dec 30, 2022
Complex Loader and Progress Management for Vue/Vuex and Nuxt Applications

Multiple Process Loader Management for Vue and (optionally) Vuex. Read the Medium post "Managing Complex Waiting Experiences on Web UIs". Play with de

Fatih Kadir Akın 2k Jan 9, 2023
:panda_face: A simple,progress bar for Vue.js

svg-progress-bar A simple,progress bar for Vue.js ?? online demo | ?? simple demo | ?? Chinese Document Browser support IE Firefox Chrome Safari iOS A

sos 113 Dec 22, 2022
Vue.js component for full screen loading indicator :cyclone:

Vue Loading Overlay Component Vue.js component for full screen loading indicator Demo or JSFiddle Installation # yarn yarn add vue-loading-overlay #

Ankur Kumar 1.1k Jan 3, 2023
a vue component about toy bricks of skeleton screen loading

tb-skeleton a vue component about toy bricks of skeleton screen loading install $ npm i tb-skeleton -s use npm import Vue from 'vue' import skelet

zhoulin 88 Dec 9, 2022
Youtube Like Loading Bar Component for Vue.js

vue-loading-bar Loading Bar Component for Vue.Js DEMO Need Vue 2 Version? Click Here... Intro Vue Loading Bar is a Youtube like loading bar component

Naufal Rabbani 140 Dec 18, 2022
Vue component to easily build (or use presets) SVG loading cards Facebook like.

Vue component to easily build (or use presets) SVG loading cards Facebook like.

Lucas Leandro 759 Nov 29, 2022
Vue 3 infinity loading component

vue-eternal-loading Infinity loading component written on TypeScript for Vue 3, based on IntersectionObserver. No dependencies. Features: 4 directiona

TS Pro 41 Jan 2, 2023
Simple customizeable page loader component with self state manager module for Vue.js

⌛️ Sadrix Vue Page Loader ⏳ Simple customizeable page loader component with self state manager module for Vue.js. github repository Please let me know

Sadra Hoseini 6 Aug 27, 2022
A GSAP powered, spinner component for Vue.js. Pretty and silky smooth.

A GSAP powered, spinner component for Vue.js. Pretty and silky smooth.

Christopher Gomez 0 Jul 16, 2019
Vue component runtime generator for svg-sprite-loader.

svg-sprite-vue-generator Vue component runtime generator for svg-sprite-loader. Install npm install svg-sprite-vue-generator -D Usage Inline mode All

Ming 3 Apr 15, 2020
Vue Skeleton Loader - Show component's skeleton before it's loaded

Vue Skeleton Loader Show component's skeleton before it's loaded Installation Via NPM import Vue from 'vue' import VueSkeletonLoader from 'vue-skeleto

Webcode 2 Aug 12, 2020
A spinner component library for Vue.js

A spinner component library for Vue.js

Amit Khonde 0 Aug 27, 2019
Markdown to Vue component loader for Webpack.

markdown-to-vue-loader Markdown to Vue component loader for Webpack. The built-in markdown parser is markdown-it. Examples. Features Supports Vue 2 an

Fengyuan Chen 37 Jul 2, 2022
Webpack Loader for: FrontMatter (.md) -> HTML + Attributes (+ Vue component)

frontmatter-markdown-loader Webpack Loader for: FrontMatter (.md) which returns Compiled HTML + Attributes (+ Compiled object as a Vue component) This

Sammy 0 May 15, 2019
A pure Vue component submit button with a Ladda-style spinner

vue-submit A pure Vue component submit button with a Ladda-style spinner. Based on NxtChg/pieces vue-submit but with a different approach, using vue-c

null 1 Apr 18, 2019