tomickigrzegorz / circular-progress-bar Goto Github PK

How can we build without minification?
How can we convert the code to ES5?

i need a progress bar that start red and finish green
when doing that using the current gradient option, i get a circle that start red, transform to green and then back to black.
how can i make it go only 1 way?

also how can the end of the gradient be relative to the cut prop?

An introduction would be nice - Using the progressbar role

<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div>

Instead of adding json-html to each element, we only give a percentage, the rest can be set at once for all elements globally.

<div class="global" data-pie='{ "percent": 75 }'></div>

const globalConfig = {
  "strokeBottom": 5,
  "colorSlice": "#FF6D00",
  "colorCircle": "#f1f1f1",
  "round": true
}

const global = new CircularProgressBar('global', globalConfig);
global.initial();

Polyfill loading throws error in Internet Explorer 11:

Is it possible for the center number to be a different value than the percentage of the circle? For example, I would like to use it as a card to inform that 10 processes are at 75%

This doesn't work,

var circle = new CircularProgressBar('someclass');

      setTimeout(() => {
        circle.animationTo({
          index: 0,
          percent: Math.floor(75)
        });
      }, 10);

while this works:

   var circle = new CircularProgressBar('someclass');

        setTimeout(() => {
          circle.animationTo({
            index: 0,
            percent: Math.floor(75)
          });
        }, 30);

There is some issue with the timing

Problem with IntersectionObserver, more precisely, with the threshold. Also consider whether or not to allow the IntersectionObserver configuration.

Can add smooth progress bar animation. The new prop should be set in json, smooth line 48

transition: stroke-dashoffset 500ms ease-out;

How to disable the text mechanism and leave only the moving circle?

There is a problem if there is no "stroke" set in the html, no default stroke is set.

Changing the class name of individual elements results in an error. e.g.
<div class="pie" data-pie=... we will change for example to <div class="element" data-pie=...

Consequently, bad circle display.

If we have several circular-progress-bars in the same window, they are displayed incorrectly.

I'm not sure if it's intended or not but using for example:

setTimeout(() => {
            const options = {
                // item number you want to update
                "index": 1,
                // set a new percentage
                "percent": 30,
                // set a new color
                "colorSlice": "#000"
            };
            circle.animationTo(options);
}, 3000); // after 3s update

And the stroke isn't changing color to black.
This can be useful if for example for percentage < 30 then set font color and stroke color to green, if percentage < 60 then set colors to orange, etc..

Wrong filename when generating libraries in dist folder - CircularProgressBar.min.js should be circularProgressBar.min.js

If "number": false is set then 0% progress bar is displayed incorrectly

Hello,

We use your Circle in our application and we often change the percent options with the animationTo function.

The problem we encounter is that when we make a change with a percentage of 0%, then the circle changes for a percentage of 0% but it then stays at 0% no matter what changes we make afterwards.

For example, if we decide to change the circle to 40%, it will change to 40%.

If we ask it to change to 0%, it changes to 0%,

But if we ask it again to change to 95%, it stays at 0%.

There must be a condition in the code, such as

if (percent) { ...

and it does not enters the condition since if(0) does not enter the condition in Javascript

Is there a destructor to stop spinner?

Great work on this progress bar!

I've been incorporating it into a wizard for a mobile app (SPA), and the initial value looks great. Is there a way to update the percentage value and have the progress bar pick up on the change / update the SVG? Right now I have:

// html
<div class="pie" data-pie='{ "colorSlice": "#ffffff", "strokeWidth": 5, "size": 50, "fontColor": "#ffffff", "percent": 17 }'></div>

// JS / initialize  
this.progress = new CircularProgressBar('pie');
...

ShowStep: function (number) {
    var totalSteps = 6;
    var progressPct = ((number * 1.0 / totalSteps) * 100).toFixed(1);
    // set the progress bar
    this.progress.percent = progressPct;
}

...but setting the percent value doesn't appear to work.

Video :

What happens :

So I installed the new version in my application to fix the circle error, which remains at 0.

But now, from time to time, the circle goes round and round in circles, even if I give it a percentage of 95%.

What could be causing this?

Version :

Latest (v1.2.0)

We are trying to use the library in one of our plugin, but inverse option is not working in ios. Another is sometimes the circle goes on and on, but sometimes is works fine.

Version : 1.2.1

What happens :

We were using version 1.1.9 for our application and everything was going great.

We wanted to upgrade our version to 1.2.1 but the circle keeps going round and round when the percent is "0"

Is there a new option we need to add? 

Video example :

Here is a codepen example to reproduce the problem :

https://codepen.io/Philippe-Vincent-the-selector/pen/YzggmmB

If set to 0%, the circle with color is filled as if the circle was set to 100%