Spin Wheel
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.wheel {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
red 0deg 60deg,
yellow 60deg 120deg,
green 120deg 180deg,
blue 180deg 240deg,
indigo 240deg 300deg,
violet 300deg 360deg
);
transition: transform 3s ease-out;
}
let wheel = document.getElementById('wheel');
let spinning = false;
function spinWheel() {
if (!spinning) {
let randomRotation = Math.floor(Math.random() * 360) + 720; // Rotate between 720 to 1080 degrees
wheel.style.transform = `rotate(${randomRotation}deg)`;
spinning = true;
// Reset spinning after animation completes
setTimeout(() => {
wheel.style.transition = 'none'; // Disable transition for instant reset
wheel.style.transform = 'rotate(0deg)';
void wheel.offsetWidth; // Trigger reflow for the style to take effect
wheel.style.transition = 'transform 3s ease-out'; // Re-enable transition
spinning = false;
}, 3000);
}
}
