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.

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