Html CSS进步圈

我在这个网站上搜索了进度条，但是我找到的那些进度条显示了100%的动画圈

我希望它停止在某些百分比，如下面的屏幕截图。有没有什么方法可以让我只用CSS来实现呢

我用它制作了一把小提琴

.wrapper{
宽度：100px；/*设置进度条的大小*/
高度：100px；
位置：绝对；/*启用剪裁*/
剪辑：rect（0px，100px，100px，50px）；/*隐藏进度条的一半*/
}
/*设置组成进度条的元素的大小*/
.圆圈{
宽度：80px；
高度：80px；
边框：10px纯绿；
边界半径：50px；
位置：绝对位置；
剪辑：rect（0px，50px，100px，0px）；
}
/*使用动画选择器的数据属性*/
/*所有动画元素的基本设置*/
div[数据动画~=base]{
-webkit动画迭代计数：1；/*仅运行一次*/
-webkit动画填充模式：向前；/*保持最后一个关键帧*/
-webkit动画计时功能：线性；/*线性动画*/
}
.wrapper[数据动画~=wrapper]{
-webkit动画持续时间：0.01s；/*尽快完成关键帧*/
-webkit动画延迟：3s；/*等待动画的一半*/
-webkit动画名称：关闭包装器；/*关键帧名称*/
}
.circle[数据动画~=左]{
-webkit动画持续时间：6s；/*完整动画时间*/
-webkit动画名称：左旋转；
}
.circle[数据动画~=右侧]{
-webkit动画持续时间：3s；/*一半动画时间*/
-webkit动画名称：右旋转；
}
/*将进度条的右侧从0旋转到180度*/
@-webkit关键帧右旋转{
从{
-webkit变换：旋转（0度）；
}
到{
-webkit变换：旋转（180度）；
}
}
/*将进度条的左侧从0旋转到360度*/
@-webkit关键帧左旋转{
从{
-webkit变换：旋转（0度）；
}
到{
-webkit变换：旋转（360度）；
}
}
/*将包装夹设置为“自动”，有效地移除包装夹*/
@-webkit关键帧关闭包装器{
到{
剪辑：rect（自动，自动，自动，自动）；
}
}

---

另一个基于css的纯解决方案，它基于两个剪裁的圆形元素，我旋转这些元素以获得正确的角度：

这是支持它的基本css：

.clip1 {
    position:absolute;
    top:0;left:0;
    width:200px;
    height:200px;
    clip:rect(0px,200px,200px,100px);
}
.slice1 {
    position:absolute;
    width:200px;
    height:200px;
    clip:rect(0px,100px,200px,0px);
    -moz-border-radius:100px;
    -webkit-border-radius:100px; 
    border-radius:100px;
    background-color:#f7e5e1;
    border-color:#f7e5e1;
    -moz-transform:rotate(0);
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
}

.clip2 
{
    position:absolute;
    top:0;left:0;
    width:200px;
    height:200px;
    clip:rect(0,100px,200px,0px);
}

.slice2
{
    position:absolute;
    width:200px;
    height:200px;
    clip:rect(0px,200px,200px,100px);
    -moz-border-radius:100px;
    -webkit-border-radius:100px; 
    border-radius:100px;
    background-color:#f7e5e1;
    border-color:#f7e5e1;
    -moz-transform:rotate(0);
    -webkit-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
}

js会根据需要旋转它

很容易理解

希望有帮助， Maayan

那怎么办

HTML

和CSS

div {
    position:relative;
    margin:80px;
    width:220px; height:220px;
}
canvas {
    display: block;
    position:absolute;
    top:0;
    left:0;
}
span {
    color:#555;
    display:block;
    line-height:220px;
    text-align:center;
    width:220px;
    font-family:sans-serif;
    font-size:40px;
    font-weight:100;
    margin-left:5px;
}

---

基本代码取自简单的饼图

我不是在寻找脚本，我是在寻找有关此的任何CSS3信息。该截图来自哪个网站？如果您使用较少，您可能会感兴趣，这是对我最好的解决方案（也没有jquery！）。对我也是如此。下面是如何设置它的动画：drawCircle（'#efef'，options.lineWidth，100/100）；var i=0；var int=setInterval（function（）{i++；drawCircle（'#555555'，options.lineWidth，i/100）；span.textContent=i+“%”；if（i>=100）{clearInterval（int）；}}，100）；如何设置圆圈的渐变色？JSFIDLE在Chrome上没有显示条。在jQuery中，不需要在

.css（）中设置所有
-vendor前缀♪ 仅使用
transform:'rotate（'+degree+'deg）
这是更简单和更干净的方法，我从@Maayan示例开始工作，得到了以下结果：@panos我尝试了您的第一个解决方案。我需要。把边框圈成6px而不是10px。我也取得了同样的成绩，但达到了50%。它会猛拉一下，然后再次启动动画。试试看out@Santosh-库马尔，你需要改变其他值too@panos我将如何更改第一个解决方案进度？可以用数据元素来完成吗？我对动画相当陌生，因为
clip
现在已被弃用。
var el = document.getElementById('graph'); // get canvas

var options = {
    percent:  el.getAttribute('data-percent') || 25,
    size: el.getAttribute('data-size') || 220,
    lineWidth: el.getAttribute('data-line') || 15,
    rotate: el.getAttribute('data-rotate') || 0
}

var canvas = document.createElement('canvas');
var span = document.createElement('span');
span.textContent = options.percent + '%';

if (typeof(G_vmlCanvasManager) !== 'undefined') {
    G_vmlCanvasManager.initElement(canvas);
}

var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;

el.appendChild(span);
el.appendChild(canvas);

ctx.translate(options.size / 2, options.size / 2); // change center
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg

//imd = ctx.getImageData(0, 0, 240, 240);
var radius = (options.size - options.lineWidth) / 2;

var drawCircle = function(color, lineWidth, percent) {
        percent = Math.min(Math.max(0, percent || 1), 1);
        ctx.beginPath();
        ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
        ctx.strokeStyle = color;
        ctx.lineCap = 'round'; // butt, round or square
        ctx.lineWidth = lineWidth
        ctx.stroke();
};

drawCircle('#efefef', options.lineWidth, 100 / 100);
drawCircle('#555555', options.lineWidth, options.percent / 100);

div {
    position:relative;
    margin:80px;
    width:220px; height:220px;
}
canvas {
    display: block;
    position:absolute;
    top:0;
    left:0;
}
span {
    color:#555;
    display:block;
    line-height:220px;
    text-align:center;
    width:220px;
    font-family:sans-serif;
    font-size:40px;
    font-weight:100;
    margin-left:5px;
}