javascript - How To Make Circle Custom Progress Bar with css -

need create circular progress bar css.

html:

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

that website working

i use progressbar.js because have increase progress par based on video playing , if apply css on progressbar html component take lots of time use progressbar.js create progressbar using svg

in client site see there video played on hover progress-bar works when video played

see example: 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);