Today we will create a pie timer in HTML, CSS, and JavaScript. We can create a lot of useful things by combining these 3 languages.
How to create a pie timer in HTML?
Also Read- Beautiful 3D spinner in CSS
Step 1:
As usual, we will start by creating our HTML file with the below code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Pie Timer in HTML</title>
</head>
<body>
<svg width="250" height="250" viewbox="0 0 250 250">
<path id="border" transform="translate(125, 125)" />
<path id="loader" transform="translate(125, 125) scale(.84)" />
</svg>
<script src="main.js"></script>
</body>
</html>Step 2:
Next, we will create our style.css file with the below code
svg {
display: block;
margin: 50px auto;
}
#loader {
fill: #0088cc;
}
#border {
fill: #00517a;
}Step 3:
Now, we will create main.js file with the below code
var loader = document.getElementById("loader"),
border = document.getElementById("border"),
α = 0,
π = Math.PI,
t = 30;
(function draw() {
α++;
α %= 360;
var r = (α * π) / 180,
x = Math.sin(r) * 125,
y = Math.cos(r) * -125,
mid = α > 180 ? 1 : 0,
anim = "M 0 0 v -125 A 125 125 1 " + mid + " 1 " + x + " " + y + " z";
loader.setAttribute("d", anim);
border.setAttribute("d", anim);
setTimeout(draw, t); // Redraw
})();Boom! You have it.
The source code is on Github, Click here for the source code.
If you find this post helpful then please do like and comment.
