<!-- The inner shape creates the hole in the center. The value `r` defines the radius of the hole. -->

<!-- The middle shape defines the visible area -->

<!-- The outer shape hides everything outside of the circle This is necessary because the path used to create the bar does not perfectly match the shape of a circle. We render the path larger than needed and mask it's edges to create a perfect circle. -->

<!-- In production make sure the mask id is discrete if you plan on using multiple instances on one page -->

Circular Progress Display is pretty good style to show the progress for Image Uploading and for Voting System. Majority of browsers support SVG so it will be good to use SVG as progress Indicator. In this article you can find the SVG and JavaScript code to build Circular Progress.

var

drawProgress

=

function

if

isNaN

return

=

parseFloat

// Alot of the code below is inspired by a project I came across

// online. I've saddly lost a reference to it. Do you know where

// this might have come from?

var

=

document

'progress-radial-bar'

0

=

*

360

=

Math

PI

=

90

=

153

if

>=

360

=

359.999

var

=

*

180

=

Math

sin

*

=

Math

cos

*

-

=

>

180

1

0

=

'M 0 0 v -%@ A %@ %@ 1 '

replace

/%@/gi

+

+

' 1 '

+

+

' '

+

+

' z'

setAttribute

'd'

var

=

1.0

var

=

0.0

var

=

window

setInterval

function

=

+

0.01

if

>=

window

clearInterval

// Set Progress Percentage

document

getElementById

"mytext"

=

parseInt

*

100

+

"%"

30