kottenator / jquery-circle-progress Goto Github PK
View Code? Open in Web Editor NEWjQuery Plugin to draw animated circular progress bars
Home Page: http://kottenator.github.io/jquery-circle-progress/
License: MIT License
jQuery Plugin to draw animated circular progress bars
Home Page: http://kottenator.github.io/jquery-circle-progress/
License: MIT License
Hi,
Thank you for your plugin, it is the nicest and easiest I have found. I may have missed something but is there any way to stop the timer at the value it is ?
When I do
var A = $("#myElement").circleProgress({...})
I have tried
Baptiste
Hey,
I'm trying to hook into multiple 'circle-animation-progress' instances, as per below. I can't seem to get anywhere with the circle-animation-progress, as it always will update my percentage value for both.
var percentage = '';
var circle = [];
$(".circle-stat .circle").each(function(i, val) {
percentage = $('.percentage_value', val).val() * 100;
console.log(percentage);
circle[i] = $(val).circleProgress({
lineCap: 'round',
fill: { gradient: ['#71d4fc', '#05a1e0'] }
}).on('circle-animation-progress', function(event, progress) {
circle[i].find('p.percentage').html(parseInt(percentage * progress) + '<i>%</i>');
});
});
My markup is the following,
Is this a bug or a scope issue? Any ideas really appreciated.
-- Simon
Iphone can't show me the canvas. What it might be? Or what am i doing wrong
I love the library, but I really want to be able to change the current position of the progress bar via an ajax method. Is there any way to do this without redrawing the whole bar from zero, and without needing to cache the previous position it used outside of the widget itself?
Would be great to be able to set a % size. I'd like to set the circle to 100% width and height of parent element.
Hey,
Great plug-in.
Just an issue with the progress...it always goes to 100% rather than the value specified. Not sure if this is the intended functionality, but I'd expect progress to stop at the value specified. In this case 75%
$('.second.circle').circleProgress({
value: 0.75
}).on('circle-animation-progress', function(event, progress) {
$(this).find('strong').html(parseInt(100 * progress) + '%');
});
Thanks!
It will be useful to support some data-attributes for initialisation
<div class="circle" data-value="0.75"></div>
Hi, this is not a bug report, but a question, hoping you could help me :-)
I'd like to have 3 circles next to each other, the first animating to position x, the second to pos y and the third to position z. It would be very nice if circle 2 could start at that position, where circle one ended. How do I have to calculate that? ...sorry, my Math is really baaaaaad :-(
$('#circle_01').circleProgress({ value: 0.104 });
$('#circle_02').circleProgress({ value: 0.32, startAngle: ???[end position of circle one] });
$('#circle_02').circleProgress({ value: 0.516, startAngle: ???[end position of circle two] });
Thanks so much!
Hi, I'm using this with Bootstrap, and I was wondering if there was any way to make it responsive. Thanks!
hi,is it possible to start animation when the containing section is active..currently it finishes animation before i go to my section..
Hi!
It's possible to pause and resume the animation?
Hey.
I am using Twitter Bootstrap 3.2 which offers a class that turns an image into a circular view. Its not cropped or anything - but it just is styled to look like its actually round.
For my app, I'd like to draw a progress bar around such image. To be specific: I am uploading an image, and I want to show the image preview and have the progress bar surround it. This way I dont need to make extra space for a usual progress bar and can keep the content displayed minimal.
Is that possible with this plugin?
Kind regards, Ingwie
How would you go about making the text in the center of the progress bar to stay at the center of the progress bar on a responsive website?
Thanks for creating this, its very cool, just a question about duration and how I am using it:
function createCircle(circleID){
$(circleID).circleProgress({
value: 1,
size: 25,
animate:{
duration:[ 2000],
},
fill: {
gradient: ["blue"]
}
});
}
Regardless of what number I put for duration, the speed of the circle being drawn always seems to be the same. Am I doing something wrong? Perhaps I should put duration:["slow"] or something like that?
Steve
Edit: Huge mistake, turns out the proper syntax is animation: {
duration: 5000
},
Is it possible to change the final number to a custom value (instead of 100%) ?
For example, create a circle that increases to a final value of "7,500" (with an animated increasing values to a full circle).
this plugin has a problem when i try to use the property of animationStartValue for the first time.
The first time , i use this plugin , and i set a value to the animationStartValue property , it doesn't work
drawAnimated: function(v) {
var self = this,
el = this.el;
el.unbind(); // <------- just add this to fix the this bug. :)
el.trigger('circle-animation-start');
$(this.canvas)
.stop(true, true)
.css({ animationProgress: 0 })
.animate({ animationProgress: 1 }, $.extend({}, this.animation, {
step: function(animationProgress) {
var stepValue = self.animationStartValue * (1 - animationProgress) + v * animationProgress;
self.drawFrame(stepValue);
el.trigger('circle-animation-progress', [animationProgress, stepValue]);
},
complete: function() {
el.trigger('circle-animation-end');
}
}));
},
So I've been looking through several circle progress plugins and I find yours is nice, elegant and animated.
Problem is I don't know how to update the value without resetting the circle.
Let me explain:
I have a 5 step client side process, at first the progress is at 0%... when the first step is finished, the circle should animate to 20% (0.2), when the second step is finished, it should animate to 40% (0.4) WITHOUT going back to 0 and then to 40, and so on.
Without this functionality your progress plugin is kind of useless =(
Hope I'm missing something.
Thank you!
It would be nice to have circle color attribute. Now it is somehow grey color, which seems to have some opacity. It would be nice to be able to definie your own color. For example I would like to have light red color of the whole circle and the progress will have dark red color. Now everything has to be in grey (due to page background).
Another thing is IE8 support. It would be nice to somehow have IE8 support.
it is still heavily used on WIN XP.
Hi there,
first of all thank you for the great plugin.
This issue is related to Safari. The arc is not well painted (colors and shape - it has not rounded lines). I'm posting here some pics...
This does not occur using Chrome, where the canvas is rendered perfectly.
The application is developed using Polymer. Might it be a compatibility problem?
Thanks for your great plugin before. I just used it with angularjs and requirejs, it worked fine if I added static value inside data-value
attribute. But, when I added my controller scope variable, for example :
myController.js
...
fidi.Quota = 0.8
...
In the html directive,
<div id="fidiTargetQuota" data-value="{{fidi.Quota}}"> ... </div>
The progress bar did not show up. But, the sources showed that the data-value already binded with value 0.8
.
Thanks! Sorry for my bad English.... :)
I need the "cap" of the progress bar to be a textual representation of the value. Basically, on every circle-animation-progress
event, I need to get the cap position, move the number to that position, and update the value. Is this possible currently?
Is posible "event click on thickness" to set/get new value ?
I built this tool http://hmaidasani.github.io/RadialChartImageGenerator/ using jquery.knob to generate images from the canvas for apple watch assets. Do you think it's possible with jquery-circle-progress? I am consider switching to using your tool since it has animation support.
Hi, is there a way for the circles to start the progress when they're viewed.
As in you scroll down to the section they're in. You view them, then they start to spin. Appose to them just spinning as soon as the web pages loads.
Thanks
Hello, this is a fantastic plugin that you've made and is exactly what I've been looking for ๐
The only problem is that for some reason I can't get it to animate when I update the value. The whole thing just disappears entirely.
I'm trying to use it as a download meter to show the user the total percentage of the number of files they are downloading.
This has been what i've been trying to use and every time I update it with the new value the whole thing just vanishes
iDifference = Math.round(iFilesTotal - iFilesNeeded);
progress = (iDifference / iFilesTotal).toFixed(2);
$( "#circle" ).circleProgress( 'value', progress );
I've had to resort to what you mentioned in an earlier issue topic and this is my current set-up where I can successfully update the percentage value of the circle but it doesn't animate to the updated value :(
(I've cut the code down that I have to make it easier to read but the gist of it is when a file has finished being downloaded it does the maths and then fires of the UpdateCircle function)
iDifference = Math.round(iFilesTotal - iFilesNeeded);
progress = (iDifference / iFilesTotal).toFixed(2);
UpdateCircle();
var circle = $('#circle').circleProgress();
function UpdateCircle() {
circle.circleProgress({
animationStartValue: circle.data('circle-progress').value,
value: progress
});
};
I've probably done something wrong somewhere and it's probably a total noob error but I would greatly appreciate your help :)
I could be doing something wrong here, but I'm trying to use the first even in the docs, the circle-animation-start one, and it doesn't appear to be working
Essentially what I'm trying to do is find the dimensions of the canvas object and set the position of my counter to be in the center of the circle. I could do it through the CSS but I want it to be set regardless of the size I choose. Any ideas?
Hi,
i've got an uploader and i want to display the progress, so i'm updating the progressCircle every percent change.
If i simply update the value it starts from the beginning every time i update, so i set animationStartValue before, like that:
$('#circle').circleProgress({ animationStartValue: progress});
$('#circle').circleProgress({ value: newProgress});
but is that really the way to go?
Because if i do so, and the value changes fast there is no animation...
regards and thank you for your work!
celevra
ps.: can you tell me the color codes from the blue circle (the third) in the readme?
I'm not sure if this is the right place to post this but here goes anyway.
I'm not a javascripter and have no tech knowledge.
Question 1:
I'm trying to get the Value progress to show 100%
If I add "value: 1.0" - the value displayed is ".00"
If I add "value: 100" - the value displayed is "00.00"
How do I get a displayed value of "100" ?
Question 2:
The value in the front end shows a dot before the number - can this be removed
Example:
If I add "value: 0.50" - the value displayed is ".50"
Question 3:
Is it possible to group settings instead of having to create settings for each circle - I have 4, the only setting that changes is the value - 25, 50, 75, 100
Any help is much appreciated.
Hi,
I feel bad putting this as an issue seems as its more of a question.
Is there anyway of changing the values required from 0.0 to just round numbers from 1 to 100?
Thanks for this library,
Hi, just have a couple of quick questions. I've been struggling to implement the following customizations.
I've added the image below for illustration.
Any help would be much appreciated!
I am trying to get the empty fill thickness a bit smaller than the fill thickness - is there an elegant solution to this?
And also, this library is the king!
Hello
Thanx for plugin. It's great, but I'd like to know can you make event that change a value when line drawing?
as this http://www.jqueryscript.net/demo/Simple-jQuery-Circular-Loading-Bar-with-Percentage-Rotator/
Thanx
Hi kottenator,
Your library looks solid and light weight. I'm thinking of using it in our project. Does it support stacked progress (not concentric circles like in another example)? For instance, can it show:,
30% - no college
20% - undergrads
10% - grads
40% - no data
So, this needs 4 different colors and %ages are configurable.
I am using something like this:
$('#progress_container').circleProgress({
value: 0.2,
startAngle: -Math.PI/2,
fill : {
color: '#FBC70D'
},
thickness: '2'
}).on('circle-animation-progress', function(event, progress) {
$(this).find('strong').html(parseInt(100 * progress) + '%');
});
But the percentage doesn't show up, only the circle. Am I missing anything? Do I need to set up any html as well? Please response ASAP.
Hello,
Is any chance to change a value? I need value from 0 to 50 not 0.0 to 1.0.
I tried to use the following code for the progress. But when the value is 100%, it only shows 00. But the circles is complete. What might be the problem?
$('.second.circle').circleProgress({
value: 0.75
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').html(parseInt(100 * stepValue) + '%');
});
Hi there,
Is there a possibility to make the animation start when you scroll to a certain div?
Greetings
I would like to do something like this using your plugin, basically just to draw circle of certain radius at the start of the arc.
Is it possible with your plugin? I've browsed source code, but I'm unsure where to put this kind of stuff, my guess is that I add extra method like drawStartCircle in drawArc function and extra property for startCircleRadius in the prototype. Would do you think?
Very good job with the library! Fits a little project of mine totally perfect.
I have two questions:
Cheers!
how can i animate circle while scrolling down to page ? my page is quite long and this plugin come just above the footer, but it animate, when page loads and when scroll down, can not see the circle progress effect ?
Hi,
I know you added a foreground color that is a grey with some opacity, can I remove it somehow? Just want to show the loading circle animation, not the holder.
Hi,
Can you please make a example where value is updated every second from json (either via ajax or .getjson) ?
Thanks n advance
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.