<div class="progressbar"></div>
<button>Run Animation</button>
.progressbar {
width: 100vw;
height: 0.5em;
background: red;
transform-origin: 0 50%;
transform: scaleX(0);
position: fixed;
top: 0;
left: 0;
}
body {
margin: 0;
display: grid;
place-items: center;
min-height: 100vh;
}
html, body {
background: #fff;
}
@supports(-webkit-touch-callout: none) {
html {
height: -webkit-fill-available;
}
body {
min-height: -webkit-fill-available;
}
}
document.querySelector('button').addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
// https://developer.mozilla.org/en-US/docs/Web/API/Animation
new Animation(
// https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect
new KeyframeEffect(
document.querySelector('.progressbar'),
{
backgroundColor: ['red', 'darkred'],
transform: ['scaleX(0)', 'scaleX(1)'],
},
{
duration: 2500,
fill: 'forwards',
easing: 'linear',
}
)
).play();
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.