<div class="progress-container">
	<div class="progress-box">
	    <div class="progress-fill"></div>
	</div>
	<div class="progress-state state-load">Loading…</div>
	<div class="progress-state state-finish">Complete!</div>
</div>
<div class="dump-truck">
	<div class="front"></div>
	<div class="bucket"></div>
	<div class="dirt">
		<div class="dirt-spill"></div>
	</div>
	<div class="base"></div>
	<div class="wheel wheel-front"></div>
	<div class="wheel wheel-middle"></div>
	<div class="wheel wheel-back"></div>
</div>
<div class="dump-truck">
	<div class="front"></div>
	<div class="bucket"></div>
	<div class="dirt">
		<div class="dirt-spill"></div>
	</div>
	<div class="base"></div>
	<div class="wheel wheel-front"></div>
	<div class="wheel wheel-middle"></div>
	<div class="wheel wheel-back"></div>
</div>
$truckLoopDur: 10s;

// colors
$sky: rgb(135,190,255);

$r: rgb(255,63,48);
$rT: rgba(255,63,48,0);

$w: rgba(255,255,255,0.15);
$wT: rgba(255,255,255,0);

$bk: rgb(40,40,40);
$bkT: rgba(40,40,40,0);

$tbk: rgba(0,0,0,0.15);
$tbkT: rgba(0,0,0,0);

$br: rgb(127,91,88);
$brT: rgba(127,91,88,0);

$dbr: rgb(100,50,50);
$dbrT: rgba(100,50,50,0);

$dgy: rgb(80,80,80);
$dgyT: rgba(80,80,80,0);

$lgy: rgb(160,160,160);
$lgyT: rgba(160,160,160,0);

*, *:before, *:after {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	font-size: 20px;
}
body {
	background: $sky;
	color: #222;
	font: 1em "Anton", sans-serif;
	line-height: 1.5;
	overflow-x: hidden;
}
/* all */
.progress-container, .progress-state, .dump-truck, .dump-truck div {
	position: absolute;
}

/* progress */
$truckRounds: 2;
$loops: 2;
.progress-container, .progress-box {
	width: 6em;
}
.progress-container {
	top: 50%;
	left: calc(50% - 3em);
	height: 7.5em;
	z-index: 2;
}
.progress-box {
	border-radius: 0 0 0.5em 0.5em;
	border: 0.5em solid $dgy;
	border-top: 0;
	height: 4em;
}
.progress-fill {
	animation: fillDirt $truckLoopDur linear forwards;
	background: $dbr;
	transform: scaleY(0);
	transform-origin: 50% 100%;
	transition: transform $truckLoopDur/20 ease-out;
	width: 100%;
	height: 100%;
}
.progress-state {
	bottom: 0;
	left: 0;
	font-size: 1.5em;
	text-align: center;
}
.state-load {
	animation: hideLoad ($truckLoopDur * $truckRounds) linear forwards;
}
.state-finish {
	animation: showFinish 0.3s ($truckLoopDur * $truckRounds) linear forwards;
	visibility: hidden;
}
/* trucks */
.dump-truck {
	opacity: 0;
	top: calc(50% - 4em);
	width: 14em;
	height: 8em;
	&:nth-of-type(2) {
		animation: backupL $truckLoopDur ease-in-out $truckRounds forwards;
	    right: 50%;
		transform: scaleX(-1) translateX(5em);
		.bucket {
	        animation: dump $truckLoopDur linear $truckRounds;
		}
		.dirt {
			animation: rotateDirt $truckLoopDur linear $truckRounds;
		}
		.dirt-spill {
			animation: pourDirt $truckLoopDur linear $truckRounds;
		}
		.wheel {
	        animation: spinL $truckLoopDur ease-in-out $truckRounds;
		}
	}
	&:last-of-type {
		animation: backupR $truckLoopDur $truckLoopDur/2 ease-in-out $truckRounds forwards;
	    left: 50%;
		transform: translateX(5em);
		.bucket {
	        animation: dump $truckLoopDur $truckLoopDur/2 linear $truckRounds;
		}
		.dirt {
			animation: rotateDirt $truckLoopDur $truckLoopDur/2 linear $truckRounds;
		}
		.dirt-spill {
			animation: pourDirt $truckLoopDur $truckLoopDur/2 linear $truckRounds;
		}
		.wheel {
	        animation: spinR $truckLoopDur $truckLoopDur/2 ease-in-out $truckRounds;
		}
	}
}
.front {
	background:
		linear-gradient($r,$r) 2.7em 0.75em / 0.2em 2em,
		linear-gradient($lgy,$lgy) 1em 3.5em / 0.8em 0.2em,
		linear-gradient($dgy,$dgy) 3.3em 6.1em / 0.5em 0.2em,
		linear-gradient($dgy,$dgy) 3.3em 6.8em / 0.5em 0.2em,
		linear-gradient(83deg, $bk 49%,$bkT 50%) 1em 0.75em / 5em 2em,
		radial-gradient(3.4em 4.6em at 33% 100%,$wT 49%,$w 50%,$w 59%,$wT 60%),
		radial-gradient(3.4em 4.6em at 33% 100%,$rT 49%,$r 50%);
	background-repeat: no-repeat;
	border-radius: 10% 20% 5% 25% / 10% 50% 5% 100%;
	top: 0.4em;
	left: 10.1em;
	width: 3.9em;
	height: 7em;
}
.bucket {
	background:
		repeating-linear-gradient(95deg,$tbkT,$tbkT 0.85em,$tbk 0.9em,$tbk 1.75em,$tbk 1.8em) 0.1em 1.6em / 7.8em 3.2em,
		linear-gradient($dgy,$dgy) 8em 0 / 2em 0.5em,
		linear-gradient(95deg,$dgyT 0.45em,$dgy 0.5em,$dgy 1.45em,$dgyT 1.5em) 7em 0 / 1.6em 5.5em,
		linear-gradient($dgyT 1em,$dgy 1em) 0 0 / 7.5em 5.5em;
	background-repeat: no-repeat;
	border-radius: 0 0 0 25% / 0 0 0 15%;
	top: 0;
	left: 0;
	width: 10em;
	height: 5.5em;
	transform: rotate(0deg);
	transform-origin: 22% 100%;
}
.dirt {
	background: $dbr;
	border-radius: 0 0 50% 50% / 0 0 100% 100%;
	top: 1.1em;
	left: -3.2em;
	width: 7.4em;
	height: 3em;
	transform: rotate(-25deg);
    transform-origin: 50% 0;
	z-index: -1;
}
.dirt-spill {
	background: $dbr;
	border-radius: 0.4em;
	top: 0;
	left: -5.25em;
	transform: rotate(-40deg) scale(1,1);
    transform-origin: 5.25em 0em;
	width: 5.5em;
	height: 0.8em;
}
.base {
	background: $br;
	border-radius: 0.25em;
	top: 5.5em;
	left: 2em;
	width: 8.3em;
	height: 1.5em;
}
.wheel {
	background:
		radial-gradient(100% 100%,$bk 9%,$bkT 10%),
		radial-gradient(100% 100%,$lgy 29%,$lgyT 30%),
		linear-gradient(90deg,$w 49%,$wT 50%),
		radial-gradient(100% 100%,$bk 49%,$bkT 50%);
	border-radius: 50%;
	bottom: 0;
	width: 2.4em;
	height: 2.4em;
}
.wheel-front {
	left: 10.4em;
}
.wheel-middle {
	left: 4.5em;
}
.wheel-back {
	left: 2em;
}

/* animations */
@keyframes backupL {
	from, 50%, to {
		opacity: 0;
		transform: scaleX(-1) translateX(20em);
	}
	12.5%, 37.5% {
		opacity: 1;
		transform: scaleX(-1) translateX(5em);
	}
}
@keyframes backupR {
	from, 50%, to {
		opacity: 0;
		transform: translateX(20em);
	}
	12.5%, 37.5% {
		opacity: 1;
		transform: translateX(5em);
	}
}
@keyframes dump {
	from, 12.5%, 37.5%, to {
		transform: rotate(0deg);
	}
	20%, 30% {
		transform: rotate(-40deg);
	}
}
@keyframes rotateDirt {
	from, 19.9%, 30.1%, to {
		opacity: 0;
	}
	20%, 30% {
		opacity: 1;
		transform: rotate(-40deg);
	}
	25% {
		transform: rotate(-25deg);
	}
}
@keyframes pourDirt {
	from, 20% {
		transform: rotate(-40deg) scale(0,0);
	}
	25% {
		transform: rotate(-40deg) scale(1,1);
	}
	30%, to {
		transform: rotate(-25deg) scale(0.8,0);
	}
}
@keyframes spinL {
	from, 50%, to {
		transform: rotate(-0.5turn);
	}
	12.5%, 37.5% {
		transform: rotate(-2.5turn);
	}
}
@keyframes spinR {
	from, 50%, to {
		transform: rotate(0);
	}
	12.5%, 37.5% {
		transform: rotate(-2turn);
	}
}
@keyframes hideLoad {
	from {
		visibility: visible;
	}
	to {
		visibility: hidden;
	}
}
@keyframes showFinish {
	from {
		transform: scale(0);
		visibility: visible;
	}
	80% {
		transform: scale(1.2);
	}
	to {
		transform: scale(1);
		visibility: visible;
	}
}
View Compiled
window.addEventListener("DOMContentLoaded", loading)
function loading() {
	var percents = [0.25,0.5,0.75,1],
		step = 0,
		truckLoopDur = 10,
	    fill = function() {
			let fillEl = document.querySelector(".progress-fill");
			fillEl.style.transform = "scaleY(" + percents[step] + ")";
			++step;

			if (step < percents.length) {
				setTimeout(fill, (truckLoopDur * 1e3)/2);
			}
	    };
	setTimeout(fill, (truckLoopDur * 1e3)/4);
}

External CSS

  1. https://fonts.googleapis.com/css?family=Anton

External JavaScript

This Pen doesn't use any external JavaScript resources.