setaman / vue-ellipse-progress Goto Github PK
View Code? Open in Web Editor NEWA Vue.js component to create beautiful animated circular progress bars
Home Page: https://vue-ellipse-progress-demo.netlify.com/
License: MIT License
A Vue.js component to create beautiful animated circular progress bars
Home Page: https://vue-ellipse-progress-demo.netlify.com/
License: MIT License
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:
Expected behavior
A clear and concise description of what you expected to happen.
Desktop (it doesn't matter):
Plugin Version: 2.1.1
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 };
},
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"
}
]
}
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
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
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);
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
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.
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!
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?
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.
How can I go around and then go around again
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
Acceptance criteria
I want it to trigger every five seconds
<vue-ellipse-progress animation="default 5000" :progress="progress"/>
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>
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?
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
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.
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.
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.
The dot is not moving on IOS device for me.
Device: iPhone XS,
Browser: Chrome
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?
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.
It needs a index.d.ts file
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 ?
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:
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
Desktop:
Smartphone:
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.
how can I change the maximum, now It's on 100.
thnx
How can we display digits separating thousands in legendValue like this :
new Intl.NumberFormat ('fr-FR'). format (Number)
100000 => display 1 00 000
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.