*, *:before, *:after {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  font-size: 20px;
}
body {
  background: #b7634b;
  color: #222;
  font: 1em "Anton", sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
}
.progress-container, .progress-state, .dump-truck, .dump-truck div {
  position: absolute;
}
.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 #505050;
  border-top: 0;
  height: 4em;
}
.progress-fill {
  animation: fillDirt 10s linear forwards;
  background: #643232;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform 0.5s ease-out;
  width: 100%;
  height: 100%;
}
.progress-state {
  bottom: 0;
  left: 0;
  font-size: 1.5em;
  text-align: center;
}
.state-load {
  animation: hideLoad 20s linear forwards;
}
.state-finish {
  animation: showFinish 0.3s 20s linear forwards;
  visibility: hidden;
}
.dump-truck {
  opacity: 0;
  top: calc(50% - 4em);
  width: 14em;
  height: 8em;
}
.dump-truck:nth-of-type(2) {
  animation: backupL 10s ease-in-out 2 forwards;
  right: 50%;
  transform: scaleX(-1) translateX(5em);
}
.dump-truck:nth-of-type(2) .bucket {
  animation: dump 10s linear 2;
}
.dump-truck:nth-of-type(2) .dirt {
  animation: rotateDirt 10s linear 2;
}
.dump-truck:nth-of-type(2) .dirt-spill {
  animation: pourDirt 10s linear 2;
}
.dump-truck:nth-of-type(2) .wheel {
  animation: spinL 10s ease-in-out 2;
}
.dump-truck:last-of-type {
  animation: backupR 10s 5s ease-in-out 2 forwards;
  left: 50%;
  transform: translateX(5em);
}
.dump-truck:last-of-type .bucket {
  animation: dump 10s 5s linear 2;
}
.dump-truck:last-of-type .dirt {
  animation: rotateDirt 10s 5s linear 2;
}
.dump-truck:last-of-type .dirt-spill {
  animation: pourDirt 10s 5s linear 2;
}
.dump-truck:last-of-type .wheel {
  animation: spinR 10s 5s ease-in-out 2;
}
.front {
  background: 
    linear-gradient(#1e90ff, #1e90ff) 2.7em 0.75em/0.2em 2em,
    linear-gradient(#32cd32, #32cd32) 1em 3.5em/0.8em 0.2em,
    linear-gradient(#008080, #008080) 3.3em 6.1em/0.5em 0.2em,
    linear-gradient(#008080, #008080) 3.3em 6.8em/0.5em 0.2em,
    linear-gradient(83deg, #004466 49%, rgba(0, 68, 102, 0) 50%) 1em 0.75em/5em 2em, 
    radial-gradient(3.4em 4.6em at 33% 100%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 59%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(3.4em 4.6em at 33% 100%, rgba(30, 144, 255, 0) 49%, #1e90ff 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, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 0.85em, rgba(0, 0, 0, 0.15) 0.9em, rgba(0, 0, 0, 0.15) 1.75em, rgba(0, 0, 0, 0.15) 1.8em) 0.1em 1.6em/7.8em 3.2em, linear-gradient(#505050, #505050) 8em 0/2em 0.5em, linear-gradient(95deg, rgba(80, 80, 80, 0) 0.45em, #505050 0.5em, #505050 1.45em, rgba(80, 80, 80, 0) 1.5em) 7em 0/1.6em 5.5em, linear-gradient(rgba(80, 80, 80, 0) 1em, #505050 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: #643232;
  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: #643232;
  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: #7f5b58;
  border-radius: 0.25em;
  top: 5.5em;
  left: 2em;
  width: 8.3em;
  height: 1.5em;
}

.wheel {
  background: radial-gradient(100% 100%, #282828 9%, rgba(40, 40, 40, 0) 10%), radial-gradient(100% 100%, #a0a0a0 29%, rgba(160, 160, 160, 0) 30%), linear-gradient(90deg, rgba(255, 255, 255, 0.15) 49%, rgba(255, 255, 255, 0) 50%), radial-gradient(100% 100%, #282828 49%, rgba(40, 40, 40, 0) 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;
}

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