loader-track24.pug

// https://codepen.io/anon/pen/MQKZWq
#loader-wrapper: #loader

loader-track24.styl

loader-size = 150px
border-width = 3px
anim-duration = 3s
anim-state = paused // paused/running

posrel()
  display block
  position relative
positionpref(pos)
  position absolute
  left pos
  right pos
  top pos
  bottom pos
borderpref(color, time)
  border-radius 50%
  border border-width solid transparent
  border-top-color color
  animation spin time linear infinite anim-state
create_content(pos, color, time)
  content ""
  positionpref(pos)
  borderpref(color, time)

#loader-wrapper
  postrel()
  width 100%
  z-index 100
#loader
  posrel()
  width loader-size
  height loader-size
  margin 0 auto
  borderpref(#3498db, anim-duration / 3*2)
  &:before
    create_content(5px, #e74c3c, anim-duration)
  &:after
    create_content(15px, #f9c922, anim-duration / 2)

@keyframes spin
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }