如何使用css创建圆自定义进度条

Question

需要帮助来创建循环进度条css。

HTML：

<pre> 

<progress id='p' max='100' value='0'><span>0</span>% played</progress> 

</pre> 

这就是我工作

Answer 1

的website我用Progressbar.js为，因为我有上升进展面值基于视频播放，如果你在进度条上应用css h tml组件那么它会花费很多时间，所以使用这个Progressbar.js它会创建进度使用SVG

在您的客户网站，我看到有一个视频这是对悬停 所以现在当影片播放

这进度条工作发挥看到这个例子：http://jsfiddle.net/kevalbhatt18/grwkhnuq/2/

jQuery的

var circle = new ProgressBar.Circle('#container', { 
    color: '#FCB03C', 
    strokeWidth: 2 
}); 


$('video').hover(function(){ 
    $('#video')[0].play(); 
    $('#video')[0].play(); 
    // $('#container').css('display','block'); 

}, function(){ 
    $('#video')[0].pause(); 
    // $('#container').css('display','none'); 
}); 

var video = document.getElementById('video'); 
//var pBar = document.getElementById('p'); 
video.addEventListener('timeupdate', function() { 
    var percent = Math.floor((100/video.duration) * video.currentTime); 
    console.log(percent); 
    circle.animate(percent/100, function() { 

    }); 
}, false);