I attempted to create a progress bar design using webkit animation fillmode, but unfortunately, it is not compatible with Firefox.
I also tried converting % values to pixels, but the issue persisted.
<!doctype html>
<html>
<head>
<style rel="stylesheet">
#progressbar {
background-color: #e3e5e6;
border-radius: 8px;
padding: 0px;
width: 400px;
}
#progressbar div {
background-color: #afd163;
height: 10px;
width:0%;
border-radius: 5px;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
@keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
</style>
</head>
<body>
<div id="progressbar">
<div></div>
</div>
</body>
</html>