tigrr/circle-progress

Responsive, accessible, animated, stylable with CSS circular progress bar available as plain (vanilla) JS and jQuery plugin.

circle-progress's Issues

How can I show the value and max number as currency?

Hi, how can I show the numbers as currency with commas and a currency symbol?

进度条在走的时候，中间的数字怎么设置会有效果

进度条在走的时候，显示的数字是从0跟随进度条慢慢加到设置的数值

Number of Segments in Circle

Awesome library!

is it possible to define the number of segments in the circle?

For example:

min: 0
max: 10
value: 5

To have 10 segments that make up the circle, and 5 of them "filled".

how to make it responsive

the github page says it's responsive, but are there any built-in functions to make it responsive?

Split % symbol from value

Hi, its is possible to split % symbol from value in the separated text node, to make it smaller and align the bar value to the center of progress bar?

Also will be great if we can place some text at the bottom of the value, like on the screenshot i attached. Thank You!

anticlockwise don't work!

Hi, @tigrr
I'm trying to make one circle progress, everything is ok, but I need it to go anti-clockwise, I'm set the parametr anticlockwise: true and don't work, I'm trying set anticlockwise: false and likewise nothing works. No matter what I set to the parameter, it goes clockwise. Thx.

My Code:
new CircleProgress('.progress-circular', { min: 0, max: 100, value: 100, startAngle: 0, anticlockwise: true, textFormat: 'none', animationDuration: 5500, animation: 'linear', });

rerender svg

I am trying to create a countdown component for GrapesJS but when changing the date everything resets and the svg is deleted. It does not render it again. I guess calling (new CircleProgress ) again on the same element doesn't work? How can I fix this?

Reverse percentage ?

Hi !

Is there any possibility to use the gauge with a "reverse percentage" ?
I have a statistic set that I aim to get the lowest possible. For exemple :

Current number (value) : 968
Objective : 606
So the objective is not fully fullfilled (it's 63% fullfilled), I'm trying to make it under 606. .

I can't get to make the gauge work this way.
I tried to set "value" to the current number, "min" to "606" and "max" to "0" but the gauge fill entirely.

Maybe I'm getting this wrong.
Can you help me with this ?

Thank you very much :)

Changes not working in html

Hello tigrr,

Thank you for the great library, it's truly awesome,

However I am unable to use it in html could you please help me out?
I am using html, css and vanilla javascript

<script src="https://cdn.jsdelivr.net/npm/js-circle-progress/dist/circle-progress.min.js" type="module"></script>

It doesn't change the text format to percentage,

Or take the css,

I want to apply this css

.circle-progress-value { stroke-width: 6px; stroke: white; stroke-linecap: round; } .circle-progress-circle { stroke-width: 8px; stroke: #888; } .circle-progress-text { fill: #888; }

You can find my fiddle here
https://codepen.io/kaviharjani/pen/VwgYroZ

Thank you

Failed to set the "textFormat" property when using with Vue and custom function textFormat

I am using the latest version of circle-progress (^1.0.0-beta.0) on a Vue 3 project built with vite and its working as expected but I cannot seem to get it to work when proving a function for the textFormat prop as per the documentation.

This is how I am using it which is a direct copy of the example:

:text-format="
      function (value, max) {
        return value + ' dots';
      }
    "

I have created a StackBlitz with two progress circle - one using the value textFormat which works fine and the other with the function textFormat which does not work.

The reason I am trying to do this is I need to have a custom text within the circle and normally I would do it like this in Vue but this is not possible with this component:

<circle-progress>
<div class="custom-text">78</div>
</circle-progress>

Would be great to know what I am doing wrong here, thanks!

Half Circle Progress Like Guage

Hi @tigrr , Thanks for the library and it's working nice, I want to know is there any gauge feature in this library ?

Below is example picture...

css id's on svg no longer working?

This used to work before version 1

var obj=document.querySelector(".prog-bar");
obj.graph.paper.svg.setAttribute('id', failed?'bar-fault':'bar-ok'); 
obj.graph.circle.el.setAttribute('id', failed?'bar-circle-fault':'bar-circle-ok');
obj.graph.sector.el.setAttribute('id', failed?'bar-value-fault' :'bar-value-ok');
obj.graph.text  .el.setAttribute('id', failed?'bar-text-fault':'bar-text-ok');  

css

#bar-circle-fault {   fill: red;  }

Looking into Firefox Inspector, 'svg' elements gets the 'id' correct but there is no
'css' according to the id. 'class' works but not id.

Don't know if I'm doing somthing wrong but I get no red circle.
js-circle-progress": "^1.0.0-beta.0",

Also:
Notice that doc says 'textFormat' but 'text-format' is needed.
<circle-progress text-format="percent"></circle-progress>

Additional text below the value

Is it possible to add additional text under the value?
For instance:

Thanks.

text-format=“percent” prop not working

I am using js-circle-progress component in my Vue 2 project and I want to show the progress value as a percentage inside the circle. I tried to use the text-format=“percent” prop as shown in the documentation, but it does not work. The text inside the circle shows the raw value instead of the percentage.

<circle-progress :value="80" :size="200" :stroke-width="10" :stroke-color="#00ff00" text-format="percent" />

version name: "js-circle-progress": "^1.0.0-beta.0",

Hi I have some question about circle-progress.

I want to show progress text like minute : second via circle-progress.
Could you please teach me "What do I have to do?"

I have one question about using gradient effect with your circle-progress css like below picture.

How can I express it?

Could you plz... Sugguest a way? ToT

Updating startAngle is not animated

If you're updating the startAngle it's not animated like the value, min and max.

https://jsfiddle.net/s5gbj0dn/

This is a really awesome library, thank you for building it!

Changing the color according the value (newVersion)

Hi,

first of all thanks a lot for this circle animation. It is really great.
I was trying to change the color of the circle according the value.
I saw there was already a request/question regarding this issue, but
the solution you gave was for the old version.

Could you please provide me a solution, so I can change the color
according the progress of the circle. Where do I have to make any
changes?

Thanks a lot in advance.
mcsahmaran

Change progress color based on value

Hi, is there a way to change the progress bar color based on value?

Example:

value > 80 = green
value >60 = yellow
value < 60 = red

Or even better, is it possible for the progress bar to adapt dynamically to the color given a specific range of colors?
Example: colors from green to red on a scale from 0 to 10, where 10 is green and 0 is red

Thank you

how multi circle-progress style on one page

i tired setup multi circle-progress same examples.

<div class="example">
<div class="example-figure">
<circle-progress class="progress" max="100" value="60"></circle-progress>
</div>

<style>
circle-progress::part(value) {
stroke-width: 6px;
stroke: hsl(320, 80%, 60%);
stroke-dasharray: 4 1;
}

circle-progress::part(circle) {
stroke-width: 6px;
stroke: #eee;
}

circle-progress::part(text) {
font-weight: bold;
fill: hsl(180, 80%, 47%);
}
</style></div>

<div class="example">
<div class="example-figure">
<circle-progress class="progress" max="100" value="60"></circle-progress>
</div>
<style>
circle-progress::part(value) {
stroke-width: 6px;
stroke: hsl(280, 90%, 50%);
stroke-linecap: round;
}

circle-progress::part(circle) {
stroke-width: 2px;
}
</style>
</div>

but circle show same style

Excellent script! Congrats!!!

Is there a way to add a 3 color gradient to the progress circle as it uploads a file?

UPDATE:

I was able to include the widget as an ID per table row instead of a class... and it works WONDERFULLY.... Now I am having trouble resizing the svg below 100 pixels width and height. Is there a way to force it and make it around 50x50 or 70x70 pixels?

Thanks

Question: Can I apply more circles on the same element, connected to each other in a kind of chain?

Can I apply more circles on the same element, connected to each other in a kind of chain?

I currently have two circles:
Circle X (outermost circle): 100/100
Circle Y (inner circle): 30/30

and I would like that by decrementing the total value 130 you would see circle Y decrease and when you reached 0 see the value on circle X decrease.

Can set value as Indeterminate

Hi,
I'm using the progress-circle multiple times in a page.
Do do so I set the value in data tag as <div class="nota-analise big circulo" data-score="9">
When I call my javascript it is called looking for that value. It don't work when their's no score set.

my javascript.
var notas = cj('.nota-analise').all();
notas.forEach(function(nota){ var score = cj(nota).attr('data-score'); new CircleProgress(nota, { max: 1, max: 10, value: score, textFormat: 'value', indeterminateText: '--' }); });

doesn't matter what I set in value (null, undefined), it never set as indeterminated.
Can you help me?

Method to replay the animation

Hi there,

I saw you do replay the animation on the example page but didn't know how to do it. Could you please show me the function to call or methods to manually trigger the animation anytime I want?

Thank you.

Counting text animation

This is very nice and useful library, but it is possible to add a feature, where the item text will counting (with a progress animation) to an item value? Thank You!

Specifying Properties When Importing from CDN

I'm linking this library from the CDN in a static html page, which is packaged as a standalone html document with no dependencies. I'm using the CDN example from the README:

<script src="https://cdn.jsdelivr.net/npm/js-circle-progress/dist/circle-progress.min.js" type="module"></script>

<circle-progress value="50" max="100"></circle-progress>

I'd like to specify some properties (such as textFormat) using html attributes:
<circle-progress textFormat="value" value="50" max="100"></circle-progress>

This doesn't work. The problem may be obvious to frontend developers (which I am not) but I'm unsure how this should work in an environment when I cannot import a node module or a local js file.

Is what I'm trying to do even possible, or are these attributes only available via the constructor when creating the object in js?