<div id="loader">
	<progress id='p' value='0' max='100'></progress>
	<output for='p'></output>
</div>

c = #8AAAFF, #FA8CFF
h = .25em

bar()
	border none
	border-radius .5*h
	background #E6EEFF

val()
	border none
	border-radius inherit
	background linear-gradient(90deg, c)

body, #loader
	display flex
	justify-content center
	align-items center

body
	height 100vh

#loader
	flex-direction column-reverse
	color c[0]
	font 2.5em sans-serif

progress[value]
	width 12.5em
	height h
	bar()
	&::-webkit-progress-bar
		bar()
	&::-webkit-progress-value
		val()
	&::-moz-progress-bar
		val()
	&::-ms-fill
		val()
		
output:not(:empty)
	padding-bottom 1em
	
	&:after
		content '%'

const _PRG = document.getElementById('p'), 
			_OUT = document.querySelector('[for=p]'), 
			K = 5, TMAX = K*_PRG.max;

function load(t = 0) {
	if(t <= TMAX) {
		if(t%K === 0) _OUT.value = _PRG.value = t/K;
		requestAnimationFrame(load.bind(this, t + (Math.random() > .5)))
	}
};

load();