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

Question

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

HTML：

<pre>

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

</pre>

这就是我工作的website

Answer 1

我使用 Progressbar.js ，因为我必须根据视频播放增加进度，如果你在进度条h上应用 css 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);

的