<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;
	}
}