JSFiddle - React, Tailwind, and code Playground

by Keval Bhatt

HTML

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/master/dist/progressbar.js"></script>
<div id="video-holder" style="width:50%;">
	<video id="video" >
		<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
            
	</video>
        <div id="container"></div>
</div>

CSS

#container {
    width: 74%;
    position: absolute;
    z-index: 1;
}

#container > svg {
    width: 49%;
    display: block;
}
#video{
    width:35%;  border-radius: 68%; position: absolute;  z-index: 99999;
      margin-top: 19px;
    
    
}

JavaScript

var circle = new ProgressBar.Circle('#container', {
    color: '#FCB03C',
     strokeWidth: 2
});
 // Number from 0.0 to 1.0

$('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);