<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/Element/animate
	document.querySelector('.progressbar').animate(
		{
			backgroundColor: ['red', 'darkred'],
			transform: ['scaleX(0)', 'scaleX(1)'],
		},
		{
			duration: 2500,
			fill: 'forwards',
			easing: 'linear',
		}
	);
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.