Advertisemen
In this tutorial, we will learn to make round progress bar using pure HTML5 (Canvas), CSS and javascript, no plugins at all. Here is how it's going to look when it is finished.
First of all, create an empty HTML project and add the following codes inside html body.
<div id="progressWrap">
<span id="progressPercent">80%</span>
<div id="circleBg"></div>
<div id="percentBg"></div>
<canvas id="myCanvas" width="200" height="200">
Your browser doesn't support fancy progressbar.
</canvas>
</div>
I hope you guys know the basic of html canvas element, rest in the code above is pretty self explanatory, div with percent is for to display the progress amount, 80% is just a placeholder.
Then add the following codes inside javascript tag.
<script>
var canvas = document.getElementById('myCanvas'); // 1
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70; // 2
var per = (3.1/5); // 3
document.getElementById("progressPercent").
innerHTML = Math.round((per)*100)+"%"; // 4
context.beginPath(); // 5
context.arc(centerX, centerY,
radius, 0, per*2*Math.PI, false); // 6
context.lineWidth = 16;
context.lineCap = 'round';
context.strokeStyle = '#0196da';
context.stroke();
</script>
In there, 1 - Calling the canvas element declared in html.
2 - You can go higher or lower to this value depending on how big the circle you want.
3 - Calculating the percent of progress - 3.1 out of 5
4 - Displaying the progress in html
5 - context.arc(x, y, r, sAngle, eAngle, counterclockwise);
false = clockwise
true = counterclockwise
Math.PI = half circle
And to make it pretty add the following codes inside css tag.
<style>
#progressPercent
{
position: absolute;
top: 85px;
left: 75px;
font-size: 30px;
z-index: 3;
}
#progressWrap
{
display: inline-block;
padding: 5px;
/*background: #eeeeee;*/
position: absolute;
top: 100px;
left: 100px;
}
#circleBg
{
position: absolute;
z-index: 0;
top: 27px;
left: 27px;
width: 125px;
height: 125px;
border: 15px solid #cecece;
border-radius: 100%;
}
#percentBg
{
position: absolute;
z-index: 0;
top: 42px;
left: 42px;
width: 125px;
height: 125px;
background: #e3ffe8;
border-radius: 100%;
}
#myCanvas
{
position: relative;
z-index: 1;
transform: rotate(-90deg);
}
</style>
Your full code should look like this.
<!DOCTYPE HTML>
<html>
<head>
<style>
#progressPercent
{
position: absolute;
top: 85px;
left: 75px;
font-size: 30px;
z-index: 3;
}
#progressWrap
{
display: inline-block;
padding: 5px;
/*background: #eeeeee;*/
position: absolute;
top: 100px;
left: 100px;
}
#circleBg
{
position: absolute;
z-index: 0;
top: 27px;
left: 27px;
width: 125px;
height: 125px;
border: 15px solid #cecece;
border-radius: 100%;
}
#percentBg
{
position: absolute;
z-index: 0;
top: 42px;
left: 42px;
width: 125px;
height: 125px;
background: #e3ffe8;
border-radius: 100%;
}
#myCanvas
{
position: relative;
z-index: 1;
transform: rotate(-90deg);
}
</style>
</head>
<body>
<div id="progressWrap">
<span id="progressPercent">80%</span>
<div id="circleBg"></div>
<div id="percentBg"></div>
<canvas id="myCanvas" width="200" height="200">
Your browser doesn't support fancy progressbar.
</canvas>
</div>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
var per = (3.1/5)*2;
document.getElementById("progressPercent").
innerHTML = Math.round((per/2)*100)+"%";
context.beginPath();
context.arc(centerX, centerY, radius,
0, per* Math.PI, false);
context.lineWidth = 16;
context.lineCap = 'round';
context.strokeStyle = '#0196da';
context.stroke();
</script>
</body>
</html>
Advertisemen
Tidak ada komentar:
Posting Komentar