src/main/webapp/js/percentageloader.js
/**
             * Helper function - adds a path (without calls to beginPath or closePath)
             * to the context which describes the inner tube. We use this for drawing
             * the background of the inner tube (which is always at 100%) and the
             * progress meter itself, which may vary from 0-100% */
Helper function - adds a path (without calls to beginPath or closePath)
to the context which describes the inner tube. We use this for drawing
the background of the inner tube (which is always at 100%) and the
progress meter itself, which may vary from 0-100%
Helper function - adds a path ( without calls to beginPath or closePath ) to the context which describes the inner tube . We use this for drawing the background of the inner tube ( which is always at 100% ) and the progress meter itself which may vary from 0 - 100%
function makeInnerTubePath(startAngle, endAngle) {
                var centrePoint, startPoint, controlAngle, capLength, c1, c2, point1, point2;
                centrePoint = {
                    x: cX,
                    y: cY
                };
                startPoint = applyAngle(centrePoint, startAngle, innerBarRadius);
                ctx.moveTo(startPoint.x, startPoint.y);
                point1 = applyAngle(centrePoint, endAngle, innerBarRadius);
                point2 = applyAngle(centrePoint, endAngle, outerBarRadius);
                controlAngle = endAngle + (3.142 / 2.0);
                capLength = (cX * 0.20) - 4;
                c1 = applyAngle(point1, controlAngle, capLength);
                c2 = applyAngle(point2, controlAngle, capLength);
                ctx.arc(cX, cY, innerBarRadius, startAngle, endAngle, false);
                ctx.bezierCurveTo(c1.x, c1.y, c2.x, c2.y, point2.x, point2.y);
                ctx.arc(cX, cY, outerBarRadius, endAngle, startAngle, true);
                point1 = applyAngle(centrePoint, startAngle, innerBarRadius);
                point2 = applyAngle(centrePoint, startAngle, outerBarRadius);
                deg += 0.1;
                controlAngle = startAngle - (3.142 / 2.0);
                c1 = applyAngle(point2, controlAngle, capLength);
                c2 = applyAngle(point1, controlAngle, capLength);
                ctx.bezierCurveTo(c1.x, c1.y, c2.x, c2.y, point1.x, point1.y);
            }
function makeInnerTubePath ( startAngle , endAngle ) { var centrePoint , startPoint , controlAngle , capLength , c1 , c2 , point1 , point2 ; centrePoint = { x : cX , y : cY } ; startPoint = applyAngle ( centrePoint , startAngle , innerBarRadius ) ; ctx . moveTo ( startPoint . x , startPoint . y ) ; point1 = applyAngle ( centrePoint , endAngle , innerBarRadius ) ; point2 = applyAngle ( centrePoint , endAngle , outerBarRadius ) ; controlAngle = endAngle + ( 3.142 / 2.0 ) ; capLength = ( cX * 0.20 ) - 4 ; c1 = applyAngle ( point1 , controlAngle , capLength ) ; c2 = applyAngle ( point2 , controlAngle , capLength ) ; ctx . arc ( cX , cY , innerBarRadius , startAngle , endAngle , false ) ; ctx . bezierCurveTo ( c1 . x , c1 . y , c2 . x , c2 . y , point2 . x , point2 . y ) ; ctx . arc ( cX , cY , outerBarRadius , endAngle , startAngle , true ) ; point1 = applyAngle ( centrePoint , startAngle , innerBarRadius ) ; point2 = applyAngle ( centrePoint , startAngle , outerBarRadius ) ; deg += 0.1 ; controlAngle = startAngle - ( 3.142 / 2.0 ) ; c1 = applyAngle ( point2 , controlAngle , capLength ) ; c2 = applyAngle ( point1 , controlAngle , capLength ) ; ctx . bezierCurveTo ( c1 . x , c1 . y , c2 . x , c2 . y , point1 . x , point1 . y ) ; }
Helper function - adds a path (without calls to beginPath or closePath)
 to the context which describes the inner tube.
Helper function - adds a path ( without calls to beginPath or closePath ) to the context which describes the inner tube .
/* Cap length - a fifth of the canvas size minus 4 pixels */