css圆形装载机

我在网上寻找一种方式来创建简单的css圆形装载机，并且不能得到任何简单的东西。对于我正在建设的特殊网站，我需要一种以百分比形式显示调查结果的方式，这些百分比是动态的，因此我可以控制每个调查结果的百分比。css圆形装载机

这是最接近的一个，我发现：
http://tympanus.net/Tutorials/CircularProgressButton/
BGut我不需要任何动画。我只需要的形状，这将从调查不同调查和我将能够通过CSS容易地改变percantages
（例如 - 宽度：55％;等等等等。）

这是图形，其我正在使用： enter image description here

一切都需要尽可能简单，所以我也可以改变颜色。任何人都有任何想法如何做到这一点？

非常感谢

来源

2015-02-08 gil hamer

也许你可以阅读教程，并尝试建立，也可以下载源代码。 http://tympanus.net/codrops/2014/04/09/how-to-create-a-circular-progress-button/ – 2015-02-08 18:49:41

是的，我把上面的链接。我正在寻找类似但更简单的动画。谢谢@托尼巴恩斯 – 2015-02-08 19:05:29

即使你要求在CSS这个解决方案，你可以随时使用jQuery框架旋钮：http://anthonyterrien.com/knob/这是非常容易使用和实现，你有问题。

来源

2015-02-08 19:08:48 Ardian

选中此项，您可以使用svg它适用于strokeoffset。只需点击中心并输入一个值

$('input').keyup(function(){ 
 
    var val=$(this).val() 
 
    val=parseInt(val); 
 
    $('.path').css('stroke-dashoffset',(val*-315/100)) 
 
})

.path { 
 
    fill:none; 
 
    stroke-dasharray: 800; 
 
    stroke-dashoffset: 0; 
 
    transition:.5s all; 
 
} 
 

 

 
input{ 
 
    width:50px; 
 
    height:50px; 
 
    border-radius:50%; 
 
    position:absolute; 
 
    margin-left:170px; 
 
    margin-top:70px; 
 
    font-size:30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="text" maxlength="3"/> 
 
<svg width="1100" height="800"> 
 
    <circle cx="200" cy="100" r="50" stroke-width="50" stroke="cornflowerblue" fill="none"/> 
 
    <circle cx="200" cy="100" r="50" stroke-width="50" stroke="black" class="path"/> 
 
</svg>

来源

2015-04-19 15:08:25 Akshay

css圆形装载机

回答

相关问题