<div class="progressbar"></div>
<p><i>(for demonstration purposes, the animation repeats infinitely)</i></p>
@keyframes my-animation {
from {
background-color: red;
transform: scaleX(0);
}
to {
background-color: darkred;
transform: scaleX(1);
}
}
.progressbar {
width: 100vw;
height: 0.5em;
background: red;
transform-origin: 0 50%;
transform: scaleX(0); /* To prevent FOUC */
position: fixed;
top: 0;
left: 0;
animation: my-animation 2.5s linear forwards infinite;
}
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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.