用于设置线性渐变动画的jQuery脚本

Question

我想要一个循环的进度条,所以我搜索了很长时间,发现了许多插件,但我不喜欢它.所以我用纯CSS构建我自己的:

http://jsfiddle.net/9RFkw/

这很棒,但有两件事我遇到了麻烦:

1.)我正在使用Firefox V28.Final,在25%它看起来如下:

不应出现小边框.我怎样才能解决这个问题？

2.)我想要一个jquery脚本来动画进度(渐变).所以问题是,线性梯度没有统一的结构.我如何构建一个脚本,动画线性渐变从0到x%,就像我用CSS构建示例一样？

var start = 0;
var end   = 75;

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

});

谢谢!

Answer 1

您可以使用以下内容作为起点 - 在输入中输入 % 值以查看圆圈动画。

演示小提琴

超文本标记语言

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