Search code examples
jquerycsscss-animationsprogress

jQuery script to animate linear-gradient

I want to have a circular progress bar so I've searched a long time and found many plugins, but I don´t like any of it. So I've build my own one, with pure CSS:

http://jsfiddle.net/9RFkw/

It´s great, but there are two things I'm having trouble with:

1.) I am using Firefox V28.Final and at 25% it looks like the following:

enter image description here

The little border should not appear. How can I fix this?

2.) I want to have a jquery script that animates the progress (the gradient). So the problem is, that the linear-gradient has no uniform structure. How can I build a script that animates the linear-gradient from 0 to x% like I have build the example with CSS?

var start = 0;
var end   = 75;

// Animate linear-gradient from 0 to 75%
$('#progressbar').animate({

});

Thank you!

Solution

  • You can use the below as a starting point- enter a % value in the input to see the circle animate.

    Demo Fiddle

    HTML

    <svg viewbox="0 0 80 80" height="100" width="100">
    <circle cx="40" cy="40" r="38" stroke="blue" fill="none" stroke-width="3" stroke-dasharray="239" stroke-dashoffset="239" />
</svg>
<br />
<input placeholder='Enter number 1-100..' type='number' />

    CSS

    svg {
    width: 80px;
}
circle {
    transition: all 1s ease;
    border:1px solid black;
}

    jQuery

    $('input').on('keyup', function () {
    var perc = 239 - (239 * ($(this).val() / 100));
    perc=(perc > 239) ? perc = 239 : ((perc < 0) ? perc=0: perc);
    $('circle').css('stroke-dashoffset', perc);
});