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

我想要一个循环的进度条，所以我搜索了很长时间，找到了很多插件，但我一个都不喜欢。所以我用纯CSS构建了自己的一个：

这很好，但有两件事我有点麻烦：

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({

});

---

谢谢大家!

您可以使用以下选项作为起点-在输入中输入%值以查看圆动画

HTML

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

$（'input'）。在（'keyup'，函数（）{
var perc=239-（239*（$（this.val（）/100））；
perc=（perc>239）？perc=239:（（perc<0）？perc=0:perc）；
$（'circle'）.css（'stroke-dashoffset'，perc）；
});

我建议您使用SVG和转换：谢谢，我将在下周尝试一下！用jQuery和线性梯度是没有办法做到这一点的吗？

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

$('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);
});