Unless i missed something, when using ProgressBar.Path there is no way to get the reference to itself from the step function supplied in instantiation unless using some round about referencing method. I would propose this also be passed as an argument to step or merged in to the state provided to step.

Example usage would be to animate a progress bar on an irregular shaped custom path (like an arc) and also animate some text like a counter (similar to what is built in to circle and line) and might be achieved with the following:

var svgPath = document.getElementById('svgPath'),
      counter = document.getElementById('counter');

var p = new ProgressBar.Path(svgPath, {
      duration: 800,
      from: { strokeOffset: svgPath.getTotalLength() },
      to: { strokeOffset: 0 },
      attachment: { path: svgPath, counter: counter },
      // here self would be a ref to the ProgressBar.Path instance
      step: function (state, attachment, self) {
          attachment.path.setAttribute('strokeOffset', state.strokeOffset);
          attachment.counter.innerHTML = (self.value()*100);
      }
});

p.animate(0.75);

This edit needs to be compiled into the final JS files - but basically this lets you add HTML inside the progress text dynamically. I encountered this problem when I needed the text to contain a number and below it another number and in a different color & smaller.

I'm working on a new demo page for the project. I'd be open to add your demos to the new site. If you want to suggest a demo, comment to this issue with:

• Link to JSFiddle, you can fork this: http://jsfiddle.net/kimmobrunfeldt/a1osxLdj/3/
• Short description, max 27 chars
• Your name

Example of submission below. Demos will be attributed to the creator of course.

Current visual design of the new page looks like this:

Hey, that's a wonderful library. I was wondering if there's a seek to a specific point in the progress bar function? Or you could guide me and I could write one if there isn't?

Allow users to specify trail width and center tail on the path.

Sample usage:

        var progressBar = new ProgressBar.Circle(document.getElementById("container"), {
            strokeWidth: 10,
            color: "#fb7d08",
            trailColor: "#9797a5",
            trailWidth: 1,
            centerTrail: true
        });

        progressBar.set(0.3);


        var progressBar2 = new ProgressBar.Circle(document.getElementById("container"), {
            strokeWidth: 10,
            trailWidth: 1,
            trailColor: "#9797a5",
            centerTrail: true,
            color: "#6cb519"
        });

Is it possible to have multiple measurements in one progress bar? For example, if I want a bar to be empty, and if one button is clicked, it fills up X% green, and if I click a different button, the same bar fills up Y% yellow?

EDIT: This is called a stacked progress bar

When I'm changing my bar animate(), it somethings throws this error at me. Not on circles, but on line. After digging into the source code, it seems to pointing at shifty.js line 1251.

Error code below, cut off the path of my files dir ##only:

\node_modules\shifty\dist\shi…:1251 Uncaught TypeError: Cannot read property 'length' of null getFormatChunksFrom @ node_modules\progressbar.js\node_modules\shifty\dist\shi…:1251 (anonymous function) @ \node_modules\progressbar.js\node_modules\shifty\dist\shi…:1449 each @ \node_modules\progressbar.js\node_modules\shifty\dist\shi…:59 getFormatManifests @ \node_modules\progressbar.js\node_modules\shifty\dist\shi…:1441 tweenCreated @ \node_modules\progressbar.js\node_modules\shifty\dist\shi…:1631 (anonymous function) @ \node_modules\progressbar.js\node_modules\shifty\dist\shi…:164 each @ \node_modules\progressbar.js\node_modules\shifty\dist\shi…:59 applyFilter @ \node_modules\progressbar.js\node_modules\shifty\dist\shi…:162 Tweenable.setConfig @ \node_modules\progressbar.js\node_modules\shifty\dist\shi…:385 Tweenable.tween @ \node_modules\progressbar.js\node_modules\shifty\dist\shi…:300 animate @ \node_modules\progressbar.js\src\path.js:104 animate @ \node_modules\progressbar.js\src\shape.js:111 (anonymous function) @ index.js:221 // these two are just me calling animate() request.onload @ index.js:269 // these two are just me calling animate()

@kimmobrunfeldt Is it possible to make an outline instead of a trail line in the background? It should look like this:

If it is not implemented yet, would it be possible to do so?

I have an issue that the stroke in showing in RGB not HEX so it doesn't show in IE How do I get it in HEX? all the variables are in HEX

my code:

var element = document.getElementById('timeC');
var circle = new ProgressBar.Circle(element, {
    trailColor: '#D8D8D8',
    trailWidth: 10,
    strokeWidth: 10,

    // Set default step function for all animate calls
    step: function(state, circle) {
        circle.path.setAttribute('stroke', state.color);
    }
});

to start the circle:

circle.set(0);
circle.animate(0.5, {
    from: {color: '#00FF00'},
    to: {color: '#FFAE00'},
    duration: 7500
}, function(){
    circle.animate(0.99, {
        from: {color: '#FFAE00'},
        to: {color: '#FF0004'},
        duration: 10000
    });
});

It seems the height/width are around half the size they should be when viewing a circular progress bar in IE. This applies not only to my project, but also your project website's examples. Open your site in IE11 to see what I mean.

can we add an api to insert text inside ProgressBar.Circle? I mean, I wan't to add the percentage inside of it without having to rely on external html+css. Thanks!

Hi!There's a prototype pollution vulnerability in function extend() in the file utils.js.Affected versions of this package are vulnerable to Prototype Pollution which can allow an attacker to add/modify properties of the Object.prototype.the risk locate is in here: https://github.com/kimmobrunfeldt/progressbar.js/blob/74536b9eeeaaf51144706d918ed5a0a679631d96/src/utils.js#L20 https://github.com/kimmobrunfeldt/progressbar.js/blob/74536b9eeeaaf51144706d918ed5a0a679631d96/src/utils.js#L18 and the POC is as follow： var progressbar = require("progressbar.js") BAD_JSON = JSON.parse('{"proto":{"test":123}}'); console.log("Before"+{}.test) progressbar.utils.extend({},BAD_JSON,{}) console.log("After"+{}.test)

More information about the vulnerability: https://github.com/HoLyVieR/prototype-pollution-nsec18/blob/master/paper/JavaScript_prototype_pollution_attack_in_NodeJS.pdf

Bumps wheel from 0.24.0 to 0.38.1.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps certifi from 2015.11.20.1 to 2022.12.7.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

In a React project that uses Jest and Testing Library, after adding some ProgressBar circles, the tests started to fail. I believe it is due to JSDom not supporting SVG.

The error I'm receiving is:

  console.error
    Error: Uncaught [TypeError: this.path.getTotalLength is not a function]
        at reportException (node_modules\jsdom\lib\jsdom\living\helpers\runtime-script-errors.js:66:24)
        at innerInvokeEventListeners (node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:341:9)
        at invokeEventListeners (node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:274:3)
        at HTMLUnknownElementImpl._dispatch (node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:221:9)
        at HTMLUnknownElementImpl.dispatchEvent (node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:94:17)
        at HTMLUnknownElement.dispatchEvent (node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:231:34)
        at Object.invokeGuardedCallbackDev (node_modules\react-dom\cjs\react-dom.development.js:3994:16)
        at invokeGuardedCallback (node_modules\react-dom\cjs\react-dom.development.js:4056:31)
        at beginWork$1 (node_modules\react-dom\cjs\react-dom.development.js:23964:7)
        at performUnitOfWork (node_modules\react-dom\cjs\react-dom.development.js:22779:12)
        at workLoopSync (node_modules\react-dom\cjs\react-dom.development.js:22707:5)
        at renderRootSync (node_modules\react-dom\cjs\react-dom.development.js:22670:7)
        at performSyncWorkOnRoot (node_modules\react-dom\cjs\react-dom.development.js:22293:18)
        at node_modules\react-dom\cjs\react-dom.development.js:11327:26
        at unstable_runWithPriority (node_modules\scheduler\cjs\scheduler.development.js:468:12)
        at runWithPriority$1 (node_modules\react-dom\cjs\react-dom.development.js:11276:10)
        at flushSyncCallbackQueueImpl (node_modules\react-dom\cjs\react-dom.development.js:11322:9)
        at flushSyncCallbackQueue (node_modules\react-dom\cjs\react-dom.development.js:11309:3)
        at scheduleUpdateOnFiber (node_modules\react-dom\cjs\react-dom.development.js:21893:9)
        at setProgress (node_modules\react-dom\cjs\react-dom.development.js:16139:5)
        at _callee$ (src\components\widget\IamProgressWidget\IamProgressWidget.js:28:7)
        at tryCatch (node_modules\@babel\runtime\helpers\regeneratorRuntime.js:86:17)
        at Generator._invoke (node_modules\@babel\runtime\helpers\regeneratorRuntime.js:66:24)
        at Generator.next (node_modules\@babel\runtime\helpers\regeneratorRuntime.js:117:21)
        at asyncGeneratorStep (node_modules\@babel\runtime\helpers\asyncToGenerator.js:3:24)
        at _next (node_modules\@babel\runtime\helpers\asyncToGenerator.js:25:9)
        at runNextTicks (node:internal/process/task_queues:61:5)
        at listOnTimeout (node:internal/timers:526:9)
        at processTimers (node:internal/timers:500:7) TypeError: this.path.getTotalLength is not a function
        at new Path (node_modules\progressbar.js\src\path.js:43:28)
        at Circle.Shape (node_modules\progressbar.js\src\shape.js:99:26)
        at new Circle (node_modules\progressbar.js\src\circle.js:16:11)
        at src\components\widget\IamProgressWidget\ProgressCircle.js:23:7
        at mountMemo (node_modules\react-dom\cjs\react-dom.development.js:15846:19)
        at Object.useMemo (node_modules\react-dom\cjs\react-dom.development.js:16219:16)
        at useMemo (node_modules\react\cjs\react.development.js:1532:21)
        at ProgressCircle (src\components\widget\IamProgressWidget\ProgressCircle.js:21:22)
        at renderWithHooks (node_modules\react-dom\cjs\react-dom.development.js:14985:18)
        at mountIndeterminateComponent (node_modules\react-dom\cjs\react-dom.development.js:17811:13)
        at beginWork (node_modules\react-dom\cjs\react-dom.development.js:19049:16)
        at HTMLUnknownElement.callCallback (node_modules\react-dom\cjs\react-dom.development.js:3945:14)
        at HTMLUnknownElement.callTheUserObjectsOperation (node_modules\jsdom\lib\jsdom\living\generated\EventListener.js:26:30)
        at innerInvokeEventListeners (node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:338:25)
        at invokeEventListeners (node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:274:3)
        at HTMLUnknownElementImpl._dispatch (node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:221:9)
        at HTMLUnknownElementImpl.dispatchEvent (node_modules\jsdom\lib\jsdom\living\events\EventTarget-impl.js:94:17)
        at HTMLUnknownElement.dispatchEvent (node_modules\jsdom\lib\jsdom\living\generated\EventTarget.js:231:34)
        at Object.invokeGuardedCallbackDev (node_modules\react-dom\cjs\react-dom.development.js:3994:16)
        at invokeGuardedCallback (node_modules\react-dom\cjs\react-dom.development.js:4056:31)
        at beginWork$1 (node_modules\react-dom\cjs\react-dom.development.js:23964:7)
        at performUnitOfWork (node_modules\react-dom\cjs\react-dom.development.js:22779:12)
        at workLoopSync (node_modules\react-dom\cjs\react-dom.development.js:22707:5)
        at renderRootSync (node_modules\react-dom\cjs\react-dom.development.js:22670:7)
        at performSyncWorkOnRoot (node_modules\react-dom\cjs\react-dom.development.js:22293:18)
        at node_modules\react-dom\cjs\react-dom.development.js:11327:26
        at unstable_runWithPriority (node_modules\scheduler\cjs\scheduler.development.js:468:12)
        at runWithPriority$1 (node_modules\react-dom\cjs\react-dom.development.js:11276:10)
        at flushSyncCallbackQueueImpl (node_modules\react-dom\cjs\react-dom.development.js:11322:9)
        at flushSyncCallbackQueue (node_modules\react-dom\cjs\react-dom.development.js:11309:3)
        at scheduleUpdateOnFiber (node_modules\react-dom\cjs\react-dom.development.js:21893:9)
        at setProgress (node_modules\react-dom\cjs\react-dom.development.js:16139:5)
        at _callee$ (src\components\widget\IamProgressWidget\IamProgressWidget.js:28:7)
        at tryCatch (node_modules\@babel\runtime\helpers\regeneratorRuntime.js:86:17)
        at Generator._invoke (node_modules\@babel\runtime\helpers\regeneratorRuntime.js:66:24)
        at Generator.next (node_modules\@babel\runtime\helpers\regeneratorRuntime.js:117:21)
        at asyncGeneratorStep (node_modules\@babel\runtime\helpers\asyncToGenerator.js:3:24)
        at _next (node_modules\@babel\runtime\helpers\asyncToGenerator.js:25:9)
        at runNextTicks (node:internal/process/task_queues:61:5)
        at listOnTimeout (node:internal/timers:526:9)
        at processTimers (node:internal/timers:500:7)

The React widget code to draw the circle is below:

import React, { useEffect, useMemo, useCallback } from "react";
import { Circle } from "progressbar.js";

const ProgressCircle = ({ level, animate }) => {
  var wrapper = document.createElement("div");
  wrapper.className = "progressBarDiv";
  wrapper.style = "height:50px;display:flex;flex-direction:column";
  wrapper.id = level;
  var percentage = Math.round(animate * 100);
  var color = "#7F00FF";
  if (percentage >= 80) {
    color = "#00FF00";
  } else if (percentage >= 50) {
    color = "#003FFF";
  }

  const bar = useMemo(
    () =>
      new Circle(wrapper, {
        strokeWidth: 6,
        easing: "easeInOut",
        duration: 1400,
        color: color,
        trailColor: "#888",
        trailWidth: 1,
        step: function (state, circle) {
          circle.setText(percentage + "%");
        },
      }),
    []
  );

  const node = useCallback((node) => {
    if (node) {
      node.appendChild(wrapper);
    }
  }, []);

  useEffect(() => {
    bar.animate(animate);
  }, [animate, bar]);

  return <div ref={node} />;
};

export default ProgressCircle;

As a workaround, I added this code to check if the userAgent has "jsdom" in it, and just return a blank div instead of drawing.

  // Don't try to draw anything if the user agent reports "jsdom",
  // since Jest/Testing Library using jsdom cannot draw SVGs and this breaks the
  // ProgressBar.js library.
  var userAgent = window.navigator.userAgent;
  if (userAgent !== undefined) {
    if (userAgent.search("jsdom") >= 0) {
      return <div />;
    }
  }

Would it be possible to add some validation on the path value. In this case, it was the in the Path function in path.js:

var Path = function Path(path, opts) {
    // Throw a better error if not initialized with `new` keyword
    if (!(this instanceof Path)) {
        throw new Error('Constructor was called without new keyword');
    }

    // Default parameters for animation
    opts = utils.extend({
        delay: 0,
        duration: 800,
        easing: 'linear',
        from: {},
        to: {},
        step: function() {}
    }, opts);

    var element;
    if (utils.isString(path)) {
        element = document.querySelector(path);
    } else {
        element = path;
    }

    // Reveal .path as public attribute
    this.path = element;
    this._opts = opts;
    this._tweenable = null;

    // Set up the starting positions
    var length = this.path.getTotalLength();
    this.path.style.strokeDasharray = length + ' ' + length;
    this.set(0);
};

When i create one progressbar like this

this.progressbar = new ProgressBar.Circle(`#${this.id}_progressbar`, {
  strokeWidth: 9,
  trailWidth: 9,
  trailColor: '#363348',
  easing: 'easeInOut',
  duration: 1000,
  color: this.color,
});

everything works until I create another element in the class, if I create for example 3 progressbars then only the last one will work any ideas?

I have progress bar and I am using signalR to trigger animation, It workes perfectly when I am on the tab but when the tab is inavtive it pauses the animation.

var bar = new ProgressBar.Line("#su_progress-spinner", { strokeWidth: 4, easing: 'easeInOut', duration: 1400, color: '#1dc9b7', trailColor: '#eee', trailWidth: 1, svgStyle: {width: '100%', height: '100%'}, text: { style: { // Text color. // Default: same as stroke color (options.color) color: '#999', position: 'absolute', right: '0', top: '30px', padding: 0, margin: 0, transform: null }, autoStyleContainer: false }, from: {color: '#1dc9b7'}, to: {color: '#1dc9b7'}, step: (state, bar) => { bar.setText(Math.round(bar.value() * 100) + ' %'); } });