javascripthtmlcssbutton

CSS button clock effect

I am currently developing a browser game, and I have a button to provide hints. I want to authorize the player to click on the "Hint" button after 60 seconds, and to show the loading time I would like the background of the button to show a "clock" effect, starting at 12 and rotating anti-clockwise until the time is up, with two colors showing . I have been looking online to try to find similar stuff, but I couldn't find anything.

Here's an example of what I had in mind:

enter image description here

Thanks for your help!

Solution

  • This can be achieved using pseudo-element on the button to display another color and progress. And the trick is to use conic-gradient to make animation (with js, of course).

    I'm pretty sure this can be achieved with css only, but that would take me more time to figure out. Although I'm sure you'd like more control over it in code.

    document.addEventListener('DOMContentLoaded', function () { 
    const hintButton = document.getElementById('hintButton'); 
    const duration = 15; // Duration for the timer (in seconds)
    let startTime = Date.now();

    // Set up an interval that runs every 100 milliseconds
    const interval = setInterval(() => {
        const elapsedTime = (Date.now() - startTime) / 1000; // Calculate elapsed time in seconds
        const percentage = (elapsedTime / duration) * 100; // Calculate the percentage of time elapsed

        // Update the button's background to show the progress as a clockwise fill
        hintButton.style.background = `conic-gradient(
            #4caf50 ${percentage * 3.6}deg, /* Green fill based on elapsed percentage */
            #d3d3d3 ${percentage * 3.6}deg /* Remaining gray portion */
        )`;

        // Check if the full duration has passed
        if (elapsedTime >= duration) {
            clearInterval(interval); // Stop the interval once the time is up
            hintButton.disabled = false; // Enable the button
            hintButton.classList.add('enabled'); // Add a class for further styling (like cursor change)
            hintButton.style.cursor = 'pointer'; // Change the cursor to indicate it's clickable
        }
    }, 100);
});
    body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}


button {
    position: relative; /* For the pseudo-element (progress overlay) */
    width: 150px; 
    height: 50px; 
    font-size: 16px; 
    border: none; 
    border-radius: 5px; 
    background: conic-gradient(
        #d3d3d3 0deg, /* Start with a light gray color */
        #4caf50 0deg, /* Green color will grow */
        #4caf50 0deg, /* Initial green angle (0 deg) */
        #d3d3d3 360deg /* Rest of the button is gray */
    );
    color: white; 
    cursor: not-allowed; /* Pointer style when disabled */
    transition: background 0.5s; /* Smooth transition when the background updates */
}


button.enabled {
    cursor: pointer; 
}

/* Overlay for the button to give it a shaded look */
button::before {
    content: ''; /* Empty content for the pseudo-element */
    position: absolute; /* Positioned relative to the button */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1); /* Semi-transparent overlay */
    border-radius: 5px;
    z-index: 1; 
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hint Button with Timer</title>
</head>
<body>
    <button id="hintButton" disabled>Hint</button>
</body>
</html>