-for i in (1..5)
  <svg viewBox="0 0 15 200" height="200" style="transform:rotate(180deg) translate3d(0, 100px, 0);">
    <circle cx="6" cy="6" r="5" width="12" height="12" style="stroke-width:1;"/>
  </svg>
  

@keyframes loader {
  0%, 100% {transform: translate3d(0, 0, 0);}
  50% {transform: translate3d(0, 10px, 0);}
}


// personal customisation (background + footer)
body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
}

const colours = ['#05668D', '#028090', '#00A896', '#02C39A', '#F0F3BD'];
document.querySelectorAll("circle").forEach((rect, i) => {
  rect.style = `stroke: ${colours[i]};fill: ${colours[i]};`;
  rect.style.animation = `loader .8s ${i * .15}s ease-in-out infinite`;
})