JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Egg Timer with Animation</title>
  <style>
    #timer {
      font-size: 32px;
      font-weight: bold;
      text-align: center;
      margin-top: 50px;
    }

    .circle {
      width: 150px;
      height: 150px;
      border: 10px solid #ccc;
      border-radius: 50%;
      margin: 0 auto;
      position: relative;
    }

    .circle-fill {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #007bff;
      position: absolute;
      top: 0;
      left: 0;
      transform-origin: center;
      animation: fill 80s linear forwards;
    }

    @keyframes fill {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div id="timer">1:20</div>
  <div class="circle">
    <div class="circle-fill"></div>
  </div>

  <script>
    let timeLeft = 80; // 1 minute 20 seconds in seconds

    const timerElement = document.getElementById('timer');
    const circleFillElement = document.querySelector('.circle-fill');

    const intervalId = setInterval(() => {
      timeLeft--;

      if (timeLeft === 0) {
        clearInterval(intervalId);
        alert('Time is up!');
      } else {
        const minutes = Math.floor(timeLeft / 60);
        const seconds = timeLeft % 60;

        const formattedTime = `${minutes}:${seconds.toString().padStart(2, '0')}`;
        timerElement.textContent = formattedTime;

        const progress = (80 - timeLeft) / 80 * 100;
        circleFillElement.style.animationPlayState = 'running';
        circleFillElement.style.animationDuration = `${progress}s`;
      }
    }, 1000); // Update the timer every second
  </script>
</body>
</html>