I am trying to implement tiny circular slider which works fine, but what I want it to show a progress while I slide. Like a progress circular bar(pie). See the screenshot:

See more:

CSS

HTML

jQuery

I am trying to implement tiny circular slider which works fine, but what I want it to show a progress while I slide. Like a progress circular bar(pie). See the screenshot:

This is my fiddle.

img {
border: 0;
}

/* Tiny Circleslider */
#rotatescroll {
height: 300px;
position: relative;
width: 300px;
}

#rotatescroll.viewport {
height: 300px;
position: relative;
margin: 0 auto;
overflow: hidden;
width: 300px}

#rotatescroll.overview {
position: absolute;
width: 798px;
list - style: none;
margin: 0;
padding: 0;
left: 0;
top: 0;}

#rotatescroll.overview li {
height: 300px;
width: 300px;
float: left;
position: relative;}

 #rotatescroll.overlay {
background: url('http://baijs.com/tinycircleslider/images/bg-rotatescroll.png') no - repeat 0 0;
pointer - events: none;
position: absolute;
left: 0;
top: 0;
height: 300px;
width: 300px;}


#rotatescroll.thumb {
background: url('http://baijs.com/tinycircleslider/images/bg-thumb.png') no - repeat 50 % 50 % ;
position: absolute;
top: -3px;
cursor: pointer;
left: 137px;
width: 100px;
z - index: 200;
height: 100px;}

#rotatescroll.dot {
background: url('http://baijs.com/tinycircleslider/images/bg-dot.png') no - repeat 0 0;
display: none;
height: 12px;
width: 12px;
position: absolute;
left: 155px;
top: 3px;
z - index: 100;}

#rotatescroll.dot span {
display: none;}

.highlight, .indicator {
    background - color: #FC0;}