Gold Vote Animation body { background: #0d223f; display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column; font-family: sans-serif; color: white; margin: 0; } .container { display: flex; gap: 25px; margin-top: 20px; } .circle { width: 110px; height: 110px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 22px; font-weight: bold; transition: transform 0.3s ease, opacity 0.3s; } .up { background: #2ecc71; } /* صعود */ .stable { background: #f1c40f; } /* استقرار */ .down { background: #e74c3c; } /* هبوط */ .active { animation: rotate 0.5s linear forwards; opacity: 0.9; } @keyframes rotate { 0% { transform: scale(1.1) rotate(0deg); } 100% { transform: scale(1.15) rotate(360deg); } } h2 { margin-bottom: 20px; font-size: 26px; } توقعات الذهب صعود استقرار هبوط function animateVote(id, targetPercentage) { let circle = document.getElementById(id); let percentage = 0; circle.classList.add("active"); let counter = setInterval(() => { if (percentage >= targetPercentage) { clearInterval(counter); } else { percentage++; circle.textContent = percentage + "%"; } }, 15); setTimeout(() => { circle.classList.remove("active"); }, 600); } document.getElementById("up").onclick = () => animateVote("up", 68); document.getElementById("stable").onclick = () => animateVote("stable", 22); document.getElementById("down").onclick = () => animateVote("down", 10);
