kimmobrunfeldt/progressbar.js

Responsive and slick progress bars

progressbar.js's Issues

Exactly same paths, path below "leaks"

In this example: http://jsfiddle.net/k0xxp6g9/1/, you can see that blue stroke can be seen under the yellow path. Toggle blue to see the effect.

.value() returns very small floating point number when it should return 0

Ability to attach a symbol (e.g. percent) to the text value

How do I add a % symbol to the Text value?

Small example error

In the heart example, the id should be heart-path, not #heart-path

Clock Example on Demo Page Broken

The github.io page for this has a clock demo, but it seems to break and start putting the counter in the code snippet box by mistake.

Add license to distributable banner

Text label is off-center on Safari

The text label is off-center in Safari (tested on Safari 7.1.2 and OS X 10.9.5).

Also happens on the demo page:

how to Redraw the circle progress bar on the same object

Hi
I want to redraw the circle progress bar on the same object on mouse hover. but when i draw a new progress bar, after 2 or 3 times, edges get pixelated.
here is my code

this is a test1

    </div>
    <div class="progress" id="progress2" data-color="#fff" data-from="#bbb" data-to="#000">
        <div class="c-content">
            this is a test2
        </div>
    </div>
    <div class="progress" id="progress3" data-color="#fff" data-from="#bbb" data-to="#000">
        <div class="c-content">
            this is a test3
        </div>
    </div>
</div>

$('.progress').hover(function () {
var circle = new ProgressBar.Circle(this, {
strokeWidth: 2,
from: { color: $(this).attr('data-from') },
to: { color: $(this).attr('data-to') },
duration: 1000,
easing: 'easeInOut',
step: function (state, circle, attachment) {
circle.path.setAttribute('stroke', state.color);
}
});

        circle.animate(1);
    },
    function () {
        var circle = new ProgressBar.Circle(this, {
            strokeWidth: 2,
            color: $(this).attr('data-color'),
            duration: 1000,
            easing: 'easeInOut'
        });

        circle.animate(1);
    }
    );

    window.onload = function onLoad() {
        $('.progress').each(function (idx, p) {
            console.log($(p).attr('id'));
            var circle = new ProgressBar.Circle(p, {
                strokeWidth: 2,
                color: $(p).attr('data-color'),
                //from: { color: $(p).attr('data-from') },
                //to: { color: $(p).attr('data-to') },
                duration: 2000,
                easing: 'easeInOut'
            });

            circle.animate(1);
        });
    };

Full viewport progress bar

Hi !

Possible to apply this to fullscreen border ?

Thanks

Keeping multiple circle in seperate column

I am trying to keep 4 circle inside 4 column(25% width) in a row, instead of floating side by side all 4 circle appearing in single column underneath each .

Change color dynamically

I'd love to be able to set the color after the widget has been initialized.

The use case is for a progress bar that reflects the complexity of your password:
Red - not very complex
Yellow - better
Green - best

As you type I will compute the complexity, lengthen the bar and change it to the appropriate color.

Add support for stroke-linecap

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

Currently in line path, the rounding goes out of the SVG canvas.

Is it possible to generate semi-circles?

Check issue where 'afterTween' is called repeatedly

This might be a resource hog

Circular progress bar around an image

I am working on a user module for my site and I would like to use a progress bar around a circle, in which the image will be displayed once uploaded, so it takes up less space on the page itself.

How would I go about drawing the circle around the image? I am using Bootstrap as a CSS framework and it has a circular thumbnail class, which I am using to make the image into a circle.

Call step function for .set() call if provided at initialization

If user provides custom animation step function at initialization, use it when .set() is called

How to use this outside of windows.onload()?

Hello, I am sure this is a stupid beginners question, that´s because I am such.

I want to make a circle animate outside "windows.onload" but instead in a function. Could anybody help me with that?

This is what I tried:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ProgressBar.js - Minimal Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        .progress {
            height: 50px;
        }

        .progress > svg {
            height: 100%;
            display: block;
        }
    </style>
    <script type="text/javascript">
        function MyFunction()
        {   
            circle = document.getElementById("progress");
            if(circle)
                alert(circle);
            circle.set(0.8);
        }
    </script>

</head>
<body>
    <div class="progress" id="progress"></div>

    <!-- These are probably out dated so you might want to use newest versions -->
    <script src="progressbar.js"></script>

    <!--<script src="main.js"></script>-->
    <script>
    window.onload = function onLoad() 
    {
        var circle = new ProgressBar.Circle('#progress', 
            {
                color: '#009cff',
                duration: 1000,
                strokeWidth: 10,
                trailWidth: 10,
            }
        );
    };
    </script>

    <a id="myLink" href="#" onclick="MyFunction();">link text</a     
></body>

npm package issue

When using browserify with the npm package, the module shifty does not get resolved.

I think it should be expressed as a dependency in package.json and not a devDependency.

Starting point

Is it possible to make the starting point of the circle progress bar from the bottom?

If trailWidth is greater than strokeWidth trail clips

trailWidth: 15,
strokeWidth: 10

Path not working

I am trying to create a custom path animation and it doesn't seem to be animating for me. I tried the demo (heart) code here http://jsfiddle.net/xrbfw21o/1/ yet that doesn't seem to work either.

Any idea what's going on?

Add tests

Add tests to ensure API is working as documented and to see which browser vendors or versions are working. Check http://www.browserstack.com/ as an option.

Bug with the custom animation

Occurs if there are two values to be interpolated in from and to

Default stroke width on Retina

Dunno if this is just a retina issue, but the default stroke width is a bit too hard to see in my opinion (Chrome, MBP):

Here's strokeWidth === 1, which can be seen a bit more easily:

Unable to set preserveAspectRatio

I need to change the SVG's preserveAspectRatio because of an IE issue.As it is now, I have to do pbElem.svg.setAttribute("preserveAspectRatio", "xMinYMin"); I can't set it via CSS.

Can we please get it added as a property option? Like var pbElem = new ProgressBar.Line('.selector', { preserveAspectRatio: "xMinYMin"});? Same for the other SVG properties

Stacked

Any way to make stacked progress bars within the circle?

Subtitle text for Circle Progress bar

Right below the percent 👍

Font-position when starting point rotate?

Hi!! First just want to say this progessBar is amazing!!

I just have a quick question

Starting-point, i see that in another threat you gave a fiddle example(for rotation), but i see that the text is also rotated, wondering if in the future you have a plan to allow user to change the rotate but keep the text rotation fixed.

I tried to rotate the container, then force the .progress-text rotate 180 degrees, but then the text(numbers) loses its position. http://jsfiddle.net/1s6149mk/2/
Thanks!!

Circle.destroy() function is undefined

I have a ProgressBar.Circle object called timer, and when I try to call timer.destroy(); as documented, I get TypeError: undefined is not a function. Am I calling it incorrectly? timer.animate(...) is working fine.

How to set path count like circle and square ?

Hi, Thanks for this awesome plugin :)
my path works good but i want it to count from (0%) to its value (70%)

var container = document.getElementById('example-custom-container');
                    container.innerHTML = '
';
                    
                    var scene = document.getElementById('scene');
                    scene.addEventListener('load', function() {
                        var path = new ProgressBar.Path(scene.contentDocument.querySelector('#heart-path'), {
                            duration: 2000,
                            easing: hm_animation, 
                            step: function(state, circle) {
                                  circle.setText((circle.value() * 100).toFixed(0) + " %");

                            }
                        });
                    
                        path.animate(1, function() {
                            
                        });
                    });

Thanks very much

The instance of the ProgressBar Shape/Path should be accessible from the step function.

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);

Gradient pattern to 1 instead of value

Following the example where the progress path goes from red to green on completion, I'd like a gradient that's red at 0 and green at 1. Meaning if the bar stops at 50%, it won't be green. In the example code the circle ends up as green even if the value is only 0.5.

Progressbar progress relative to page loading

Great script, I was wondering If the svg progress could be adapted to be syncronized to the progress of ajax pages when loading, so the stroke finishes right when the page finish loading, any resource you can point would be appreciated.

Add version to ProgressBar object

ProgressBar.version should return current version

How can I access a ProgressBar object instance from outside the context?

For example if I do:

var circle = new ProgressBar.Circle('#example-animation2-container', { my options... });

But that instance is made on another context so I can't access the 'circle' object.
Is there a way to access the object from Jquery?, something like this:

$("#example-animation2-container").progressbar()

Add version number as comment to distributable

show text in the middle

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!

How can I limit it to a specific percentage?

I'm using this library to represent the percentage of CPU and RAM of a computer.
How can I set a specific percentage, e.g. 40%.

Indeterminate option?

Is there any way to show just a loading animation, without progress?

Thanks!

-Spencer

Rounded corners on circle

Is there a way to round the corners on the circle? For instance something like this. Thanks!

npm release

This'd be nice for people using browserify.

IE9: circle text not centered

You can fix it by adding '-ms-transform' as well:

'-ms-transform: translate(-50%, -50%);'

Issue On Setting Stop Position and Updateing the Bar

Hi Kimmo,
This looks very nice and organized progress bar but I couldn't find out how to set up stop point for percentage presentation! For example let say how you can display %80 job done out of %100?
And also how to update the bar? For example in case of having an update button like this
$('#update').on('click', function(){ circle.animate(0); circle.animate(1); });
or on scroll based animation how can you re-animate the bar?

Thanks

Document dynamically created HTML structure and other internals

Structure is already quite well explained here: #47. This would go under "how it works/internals"

Set maximum value

Is it possible to animate the progress from 0 to a defined maximum (75% for example)?

Size incorrect in IE

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.

Issue with the stroke showing in rgb not HEX

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
    });
});

Add support for IE

IE does not support SVG animations. Create a polyfill for IE browsers to make animating work. Possibly just add Snap.svg dependency for IE.

cannot setText, ever...

Hi everyone..

I wonder if any of you could help me out on why i can never set the text of my shape.

I have a progressbar line, i use to animate on file uploads, and i wanna set the text in %..

however this returns me shape.setText is not a function! Always.

I even tried the example http://kimmobrunfeldt.github.io/progressbar.js/#example-custom-animation here with the circle and still same thing. Any idea why is that?

Keeping circle within container

Is there some trick to keeping the circle from drawing outside of the container? I'm using this on a mobile app I am working on, and seems like if I dont set an explicit width/height for the container, the circle ends up overflowing out of the div.