I am trying to build a circular progress bar that will countdown as it reaches 100%. The element is supposed to be dynamic such that if you pass it in a second, it will render the countdown timer for that duration.
I have this animation working fine in chrome but failing to animate in firefox.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Ciruclar Progress Countdown</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.circular-progress {
--size: 250px;
--half-size: calc(var(--size) / 2);
--stroke-width: 20px;
--radius: calc((var(--size) - var(--stroke-width)) / 2);
--circumference: calc(var(--radius) * pi * 2);
--dash: calc((var(--progress) * var(--circumference)) / 100);
animation: progress-animation 5s linear 1s 1 forwards !important;
}
.circular-progress circle {
cx: var(--half-size);
cy: var(--half-size);
r: var(--radius);
stroke-width: var(--stroke-width);
fill: none;
stroke-linecap: round;
}
.circular-progress circle.bg {
stroke: #ddd;
}
.circular-progress circle.fg {
transform: rotate(-90deg);
transform-origin: var(--half-size) var(--half-size);
stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
stroke: blue;
transition: stroke-dasharray 0.3s linear 0s;
}
.countdown {
color: #5394fd;
}
@property --progress {
syntax: "<number>";
inherits: false;
initial-value: 0;
}
@-webkit-keyframes progress-animation {
from {
--progress: 0;
}
to {
--progress: 100;
}
@-moz-keyframes progress-animation {
from {
--progress: 0;
}
to {
--progress: 100;
}
}
@keyframes progress-animation {
from {
--progress: 0;
}
to {
--progress: 100;
}
}
</style>
</head>
<body>
<div class="circular-progress-description">
<p>Estimated wait time: <span class="duration">5</span> seconds.</p>
<svg width="250" height="250" viewBox="0 0 250 250" id="circular-progress" class="circular-progress">
<circle class="bg"></circle>
<circle class="fg"></circle>
<text id="countdown" x="125" y="125" text-anchor="middle" dy="7" font-size="20"></text>
</svg>
</div>
</body>
<script>
(function() {
let duration = 10;
console.log(`Running for ${duration} seconds`)
const progressBar = document.getElementById("circular-progress");
document.getElementsByClassName("duration")[0].innerHTML=`${duration}`;
document.getElementById("countdown").innerHTML=`${duration}`;
progressBar.style.animationDuration = `${duration}s`;
progressBar.style.animationName = `MyAnimations`;
progressBar.style.MozAnimationName = `MyAnimations`;
progressBar.style.playState = `running`;
$('#circular-progress').css('animation-duration', '10s');
progressBar.addEventListener("animationend", function() {
location.reload(true);
});
})();
</script>
</html>
I tried adding -webkit -moz but it did not help. I am unable to get it to work with firefox.