如何使用 css 制作圆形自定义进度条

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

创建 Progressbar

在您的客户网站中，我看到有一个 video 在 hover 上播放 所以现在这个进度条在视频播放时起作用

看这个例子：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);