eTG-inspired loader, pure HTML (pug) + CSS (stylus)

loader-etg.pug

#etg-loader: .loader
  each i in [0,1,2,3]
    div

loader-etg.styl

circle-colors = #44ae9e #be625e #305963 #cdaf71
circle-size = 1.3em
container-size = circle-size * 2.7
def-opacity = .8
animation-speed = 2.5s
keysteps = 'from, to' '25%' '50%' '75%'
tops = 0 0 (container-size - circle-size) (container-size - circle-size)
lefts = 0 (container-size - circle-size) (container-size - circle-size) 0

fullscreen()
  position absolute
  top 0
  bottom 0
  left 0
  right 0
  margin auto
abssquare(s)
  position absolute
  width s
  height s
abscircle(s)
  abssquare(s)
  border-radius 50%

#etg-loader
#etg-loader.overlay:before
#etg-loader .loader
  fullscreen()

#etg-loader  
  &.overlay:before
    content ' '
    background-color: alpha(white, def-opacity)
  .loader
    abssquare(container-size)
    > div
      abscircle(circle-size)
      animation none animation-speed cubic-bezier(.22,.61,.36,1) infinite none paused
      for circle-color, i in circle-colors
        &:nth-child({i + 1})
          top tops[(i)]
          left lefts[(i)]
          background-color circle-color
          animation-name s('etg-spinner-%s', i + 1)
  &.animate .loader > div
    animation-play-state running

for k in 0..3
  @keyframes etg-spinner-{(k + 1)}
    for keystep, i in keysteps
      if k + i >= 4
        k = k - 4
      {keystep}
        top tops[(k + i)]
        left lefts[(k + i)]

https://codepen.io/anon/pen/XVjMOa