HTML Code

<!DOCTYPE html>

<html>

<head>

  <title>CSS animation-play-state Toggle Example</title>

  <style>

    @keyframes spin {

      to {

        transform: rotate(360deg);

      }

    }



    .spinner {

      width: 60px;

      height: 60px;

      border: 5px solid #dbeafe;

      border-top-color: #2563eb;

      border-radius: 50%;

      animation: spin 1s linear infinite;

      animation-play-state: running;

    }



    .spinner.is-paused {

      animation-play-state: paused;

    }



    button {

      margin-bottom: 12px;

      padding: 8px 14px;

      cursor: pointer;

    }

  </style>

</head>

<body>

  <h1>Pause and Resume Spinner</h1>



  <button id="toggleBtn">Pause</button>

  <div class="spinner" id="spinner"></div>



  <script>

    const btn = document.getElementById("toggleBtn");

    const spinner = document.getElementById("spinner");



    btn.addEventListener("click", function () {

      spinner.classList.toggle("is-paused");

      btn.textContent = spinner.classList.contains("is-paused") ? "Resume" : "Pause";

    });

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS animation-play-state Property - Button Toggle