Question 234830 in Html Question posted in
Some basic documentation can be found here.

How to animate a HTML5 progress bar with CSS?

When we click on the following HTML <progress> element, its value changes to 200.

But no animation works:

progress {
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    animation: progress 1s ease;
}

progress::-webkit-progress-value {
    transition: all 1s ease;
}
<progress value="0" onclick="this.value=200" max="1000"></progess>

How to animate a HTML <progress> bar with CSS transition?

Linked but not duplicate: HTML5 progress bar animation, CSS3 Transition of HTML5 progress bar element

Also, the main answer of Animating Progress Element value (using jQuery and custom JS), doesn’t wok here, with just CSS transition/animation.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The problem was that no background-color was defined (!).

    Without (animation non-working):

    progress {
}

progress::-webkit-progress-value {
    transition: all 1s ease;
}
    <progress value="0" onclick="this.value=200" max="1000"></progess>

    With (animation working):

    progress {
    background-color: transparent;
}

progress::-webkit-progress-value {
    transition: all 1s ease;
    background-color: orange;
}
    <progress value="0" onclick="this.value=200" max="1000"></progess>


  2. 0

    Try This:

     
    const progressBar = document.getElementById("progressBar");
    let currentValue = 0;

    function animateProgressBar(targetValue, duration) {
        const startTime = Date.now();
        const initialValue = currentValue;

        function updateProgress() {
            const currentTime = Date.now() - startTime;
            const progress = Math.min(1, currentTime / duration);
            const easedProgress = easeInOut(progress);

            const newValue = initialValue + (targetValue - initialValue) * easedProgress;
            progressBar.value = newValue;

            if (progress < 1) {
                requestAnimationFrame(updateProgress);
            }
        }

        updateProgress();
    }

    function easeInOut(t) {
        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
    }

    progressBar.addEventListener("click", () => {
        animateProgressBar(200, 1000); // Animating to 200 over 1 second
    });
 
    <style>
    progress {
        width: 100%;
        height: 20px;
        background-color: lightgray;
    }
</style>
    <progress id="progressBar" value="0" max="100"></progress>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search