用于动画线性渐变的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);
});