jQuery and canvas make circular progress bar effect
Click the submit button to generate the submit circle progress style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Progress bar</title>
<style type="text/css">
/*CSS source code*/
button{
display:inline-block;
padding:10px 28px;
margin-top:50px;
margin-left:50px;
font-size:18px;
font-weight:normal;
text-align:center;
border:2px solid #1aba9c;
border-radius:4px;
color:#1aba9c;
background:#ffffff;
}
button:hover{
color:#ffffff;
background:#1aba9c;
}
</style>
</head>
<body>
<!-- Do not add <body> tags to HTML snippets //-->
<button type="button">提交</button>
<canvas id="c" width="400" height="200"></canvas>
<!-- Open source CDN is recommended to select external JS to be referenced //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<script>
/*Javascript code snippet*/
$("button").click(function(){
$(this).hide();
var i = 0;
if (i == 0) {
var time = setInterval(
function(){
++i;
schedule(i);
if (i >= 100) {
clearInterval(time);
$("canvas").hide();
$("button").fadeIn();
return;
}}, 30);
}
});
function schedule(vlaue){
var process =vlaue;
var canvas=document.getElementById("c");
var context = canvas.getContext('2d');
context.clearRect(0, 0, 200, 200);
//Start drawing a gray circle
context.beginPath();
// Coordinates move to the center of the circle
context.moveTo(100, 100);
context.arc(100, 100, 50, 0, Math.PI * 2, false);
context.closePath();
// fill color
context.fillStyle = '#ddd';
context.fill();
// Drawing fan shape
context.beginPath();
context.moveTo(100, 100);
context.arc(100, 100,50,1.5*Math.PI, Math.PI * 2 * process / 100+1.5*Math.PI);
//fill color
context.closePath();
context.fillStyle = '#1aba9C';
context.fill();
// draw hollow heart
context.beginPath();
context.moveTo(100, 100);
context.arc(100, 100, 40, 0, Math.PI * 2);
context.closePath();
context.fillStyle = 'rgb(255,255,255)';
context.fill();
// write in the middle
context.font = " 22px Arial";
context.fillStyle = '#1aba9C';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.moveTo(100, 100);
context.fillText(process+"%", 100, 100);
}
</script>
</body>
</html>
.