3/27/26 – chickenwings

i tried to make a spinner

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Symbol Spinner</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="spinner-wrapper">
    <div class="spinner-ring">
      <div class="spinner-item"><img src="Borumaki_Gaiden.webp"></div>
      <div class="spinner-item"><img src="BorumakiShiki.webp"></div>
      <div class="spinner-item"></div><img src="Code_Gaiden.webp"></div>
      <div class="spinner-item"></div><img src="Fizz.webp"></div>
      <div class="spinner-item"></div><img src="Frost.webp"></div>
      <div class="spinner-item"></div><img src="Inferno.webp"></div>
      <div class="spinner-item"></div><img src="Ink.webp"></div>
      <div class="spinner-item"></div><img src="Magma.webp"></div>
      <div class="spinner-item"></div><img src="Menza.webp"></div>
      <div class="spinner-item"></div><img src="Octo-Ink.webp"></div>
      <div class="spinner-item"></div><img src="ShiverRagnar.webp"></div>
      <div class="spinner-item"></div><img src="SurgeIcon.webp"></div>
    </div>

    <div class="spinner-center"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

was my html


    body {
      margin: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #050510;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .spinner-wrapper {
      position: relative;
      width: 300px;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;

    }

    .spinner-ring {
      position: absolute;
      width: 100%;
      height: 100%;
      animation: spin 8s linear infinite;
      top: 45px;
    }

    .spinner-item {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 70px;
      height: 70px;
      transform-origin: 0 -120px;
    }

    .spinner-item img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
      transform: rotate(calc(-1 * var(--angle)));
    }

    .spinner-item:nth-child(1)  { --angle: 0deg;   transform: rotate(0deg); }
    .spinner-item:nth-child(2)  { --angle: 30deg;  transform: rotate(30deg); }
    .spinner-item:nth-child(3)  { --angle: 60deg;  transform: rotate(60deg); }
    .spinner-item:nth-child(4)  { --angle: 90deg;  transform: rotate(90deg); }
    .spinner-item:nth-child(5)  { --angle: 120deg; transform: rotate(120deg); }
    .spinner-item:nth-child(6)  { --angle: 150deg; transform: rotate(150deg); }
    .spinner-item:nth-child(7)  { --angle: 180deg; transform: rotate(180deg); }
    .spinner-item:nth-child(8)  { --angle: 210deg; transform: rotate(210deg); }
    .spinner-item:nth-child(9)  { --angle: 240deg; transform: rotate(240deg); }
    .spinner-item:nth-child(10) { --angle: 270deg; transform: rotate(270deg); }
    .spinner-item:nth-child(11) { --angle: 300deg; transform: rotate(300deg); }
    .spinner-item:nth-child(12) { --angle: 330deg; transform: rotate(330deg); }

.spinner-center {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  cursor: pointer;
  top:0;
  background: radial-gradient(circle,
    rgba(180, 0, 255, 1) 0%,
    rgba(110, 10, 180, 1) 40%,
    rgba(40, 0, 80, 1) 70%,
    rgba(10, 0, 30, 1) 100%
  );



box-shadow{
    display: flex;
}
    

  animation: pulse 3s ease-in-out infinite;
  transition: transform 0.2s ease;
}


.glow{
    box-shadow:
    0 0 25px rgba(180, 0, 255, 0.8),
    0 0 60px rgba(150, 0, 255, 0.6),
    0 0 120px rgba(120, 0, 255, 0.4),
    inset 0 0 40px rgba(255, 255, 255, 0.15),
    inset 0 0 80px rgba(180, 0, 255, 0.25);

    transition: ease all 1s;
}

was my css

  document.addEventListener("DOMContentLoaded", () => {
    const center = document.querySelector(".spinner-center");

    center.addEventListener("click", () => {
      center.classList.remove("glow");
      void center.offsetWidth; 
      center.classList.add("glow");
    });


});

document.addEventListener("DOMContentLoaded", () => {
  const center = document.querySelector(".spinner-center");

  center.addEventListener("click", () => {
    center.classList.remove("spin");
    void center.offsetWidth; // restart animation
    center.classList.add("spin");
  });
});

was my js

Leave a Comment Cancel Reply