Pie timer in HTML
Pie timer in HTML

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.

Table of Contents

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.

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply