setaman/vue-ellipse-progress

A Vue.js component to create beautiful animated circular progress bars

vue-ellipse-progress's Issues

I guess I cant installed it tell me why and pls help me fixing

I guess i cant installed it

Animation Triggers Twice upon Mounting in Safari and Ionic App

Describe the bug
The component triggers animations twice upon mounting when using Safari or in an Ionic app which uses Safari as the browser. This issue doesn't occur when using Chrome, where the animation runs only once as expected.

To Reproduce
I've built a sample app that demonstrates the issue. The app includes Capacitor/Ionic, so the base app can be launched in an iOS emulator. However, the problem can also be seen simply by launching the app in Safari.

Steps to reproduce the behavior:

1. Launch the app in Safari or in an iOS emulator.
2. Observe the animations upon mounting.

https://github.com/jon-pruessmeier/vue-ellipse-animates-twice-safari

Expected behavior
I expect the animation to be run once upon mounting, similar to the behavior in Chrome.

Screenshots

Bildschirmaufnahme.2023-07-21.um.14.59.57.mov

video.mov

Desktop:

• OS: MacOS 13.5
• Browser: Safari
• Version: 16.5

Smartphone:

• iOS emulators and devices in general

Plugin Version: v2.1.1

Additional context
I haven't been able to identify the root cause of this issue. Possibly, certain CSS properties are interpreted differently, or not at all, in Safari? I tested this issue with Node 19.4.0. Any help in diagnosing and resolving this issue would be greatly appreciated.

The dot is not working on IOS device

The dot is not moving on IOS device for me.
Device: iPhone XS,
Browser: Chrome

Gradient not applying correctly

Seems like the gradient is not applying correctly.
Instead of applying the 100% offset to the end of the circle(100%) it seems to be applied at 50% and then the colors repeat in inverse for the other half:

For example green is applied to 0% orange to 50% and red to 100%.

Below you can see that red is applied to the 50% and then the colors repeat from 50% to 100% in inverse

:loader does not work in vue3

Latest version of vue3 (3.0.0-5).

Try:

<vue-ellipse-progress :loader="{ opacity: '0.6' }" />

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.

'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?

Can't import on Vue 3

Using v2.1.1 I can't even do import veProgress from "vue-ellipse-progress" in my main.js, getting this error:

This is my main.js:

without import veProgress from "vue-ellipse-progress" everything is fine

this project cant be used with typescript

It needs a index.d.ts file

legendClass example

Hi, maybe I'm stupid but I can't make the circle styling work with a custom CSS class in use of the legendClass tag.
So is it possible to give a short example in the documents about how the legendClass tag works or did I misunderstood the function?

Responsive sizing?

Is your feature request related to a problem? Please describe.
This is more a discussion or question, but I'm wondering if responsive sizing is possible, so instead of a fixed "size" parameter, using percentage?

What event triggered it?

I want it to trigger every five seconds

<vue-ellipse-progress animation="default 5000" :progress="progress"/>

[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.

NumberFormat

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

100000 => display 1 00 000

Typescript support

Custom validator on legendValue prop fails for message strings with ellipses...

When using a string like "Initializing..." for the legendValue prop, the prop validator throws an error.

<ellipse-progress
  class="ldut-progress"
  :progress="upload_progress"
  :loading="is_initializing"
  :legend="show_progress"
  :legend-value="progress_message"
  :size="100"
  line-mode="out-over"
  color="#07818F"
/>

get show_progress(): boolean {
  return !(this.is_initializing || this.uploaded)
}
get progress_message(): string {
  return this.is_initializing
    ? 'Initializing...'
    : 'Complete'
}

[Vue warn]: Invalid prop: custom validator check failed for prop "legendValue".
   found in
   ---> <VueEllipseProgress>

"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!

Add circle slot

Extend the slots to allow users to completely replace rendered circles and paths. This will provide maximum flexibility for the users but also require more responsibility.

Core goals

• Users should have more control over the resulting SVG, enabling them to easily add additional styles and customize the appearance
• Users should be able to provide custom SVG figures, such as an ellipse or a custom path
• The plugin should expose the internal calculations used to determine values like position, radius, circumference, etc., through the slots. This will empower users to directly apply these values to custom SVG elements

Acceptance criteria

• The plugin exposes scoped slots for progress/empty/fill/loader circle
• Scoped slots should expose internally calculated values, including position, radius, path, as well as styles, classes, and animation-related properties, that are used to render the default circles

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"
          }
        ]
  }

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.

countDecimals fails if neither "progress" or "legendValue" are defined

countDecimals throws Cannot read property 'length' of undefined if neither progress or legendValue are defined (or the progress is invalid). I should catch this case.
This issue however does not affect the rendering process of the component and all circles are rendered properly.

Trying to display legend on a multiple line ("data" driven chart)

Is your feature request related to a problem? Please describe.
As you know it's impossible to display a legend if you are displaying multiple lines.
I'm trying to build something like this:
Screenshot

I need to display info on the middle of the graph. Is the use of multiple lines the best approach? If not could you advise? Thanks

Usage with Vue3

I can't get this to work with Vue 3 and typescript, I keep getting the error below

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.

Remove unused space for half circle

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
Right now, even I specified :half="true", the component will render at 200x200. When you specify half, it looks awkward to see that empty space in website layout.

Additional context

How can I go around and then go around again

How can I go around and then go around again

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 ?

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

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

confused on using slot property on vue3

Describe the bug

In doc, its mentioned that we need to use slot like these:

But in vue3, we cant do the same, it will throw error saying:
error: slot attributes are deprecated "vue/no-deprecated-slot-attribute"

So, to stop error we need to use v-slot:legend or #legend right. So please update the docs.
Or could we use like this?

To Reproduce
Steps to reproduce the behavior:

1. Create empty component and try adding the slot property as mentioned in the doc

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
Before:

After (now no error):

Desktop (it doesn't matter):

• OS:Ubuntu 22.10
• Browser: Firefox & Chrome

Plugin Version: 2.1.1

when I use it in iphone6s with ios9，it Abnormal display

it should be

change the max

how can I change the maximum, now It's on 100.
thnx

Disabling animation

Hi,

Love the component! :)

Is it possible to disable animation all together for the progress bars to make it compatible with older browsers not supporting it?

Best,
Peter

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);

Reverse mode with split ranges?

Hi.
I just came across your great library, thanks!
I'm still working through the demos, and can't see if I can easily do the following use case so thought I'd ask.

Describe the solution you'd like

I'd like to replicate the circular pitch tuner shown here: https://youtu.be/q-gXAIjM4VU?t=60 (starting at 60 seconds in)
Note: This was done in C# Unity

So if the note is on pitch it shows at "0", if it's over pitch to will move to the right from 0 to 50 (the bottom or 180), and if the note is under pitch it will move to the left from 0 to -50 (max 180).
If it goes past 50 (180 degrees) we've actually switched to another note so the tuner starts with that note, so you only need to account for 0 to 50 midi cents either way.

So you'd be feeding the component the key (to be set as legend) and the number of midi cents over/under pitch to display in the appropriate direction left or right.

Can you do that with your component as is?

Describe alternatives you've considered

Looking into simple CSS vector solutions.

$ref is undefined when 'data' is specified on [email protected]

on version @2.1.0

Basically, I get the following error on the console when data is set
Uncaught (in promise) TypeError: t.$refs.legend is undefined

It's my understanding that the legend shouldn't even be visible when the data attribute present. The following piece of code is throwing this error.

The component still works as intended, so am I doing something wrong?

<template lang="pug">
ve-progress(:data='data' size='60' thickness="5" :gap='1')
</template>

setup() {
    const data = reactive([
      {
        progress: 100,
        color: "#34eb55",
      },
      {
        progress: 50,
        color: "#08b5ff",
      },
    ]);
    return { data };
  },