用于设置线性渐变动画的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

您可以使用以下作为起点 - 在输入中输入％值以查看圆形动画。

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