.container

  h1 CSS Loaders
	
  .row.cf
    .box
      #loader-1

    .box
      #loader-2
        span
        span
        span

    .box
      #loader-3

    .box
      #loader-4
        span
        span
        span

  .row.cf
    .box
      #loader-5
        span
        span
        span
        span

    .box
      #loader-6
        span
        span
        span
        span

    .box
      #loader-7

    .box
      #loader-8

html, body
  width 100%
  height 100%
  margin 0
  padding 0
  font-family 'Open Sans', sans-serif
	font-size 14pt
a
  text-decoration none

/* LAYOUT */
	
.container
  width 100%
  max-width 940px
  margin 0 auto
  text-align center

.row
  margin 1rem 0

.box
	display inline-block
	width 23%
	margin 1rem
  background-color #eee
  &:first-of-type
    margin-left 0

/* CLEARFIX */

.cf
  &:before,
  &:after
      content " "
      display table
  &:after
      clear both
  *zoom 1

/* ALL LOADERS */


[id|=loader]
  width 100px
  height 100px
  border-radius 100%
  position relative
  margin 0 auto

/* LOADER 1 */

#loader-1
  &:before,
  &:after
    content ""
    position absolute
    top -10px
    left -10px
    width 100%
    height 100%
    border-radius 100%
    border 10px solid transparent
  &:before
    border-top-color #39d
    // z-index 2
    animation spin 1s infinite
  &:after
    animation spin 1s infinite alternate
    border-bottom-color #ccc
@keyframes spin
  0%
    transform rotate(0deg)
  100%
    transform rotate(360deg)

/* LOADER 2 */

#loader-2
  span
    display inline-block
    width 20px
    height 20px
    border-radius 100%
    background-color #3498db
    margin 35px 5px
    &:nth-child(1)
      animation bounce 1s ease-in-out infinite
    &:nth-child(2)
      animation bounce 1s ease-in-out 0.33s infinite
    &:nth-child(3)
      animation bounce 1s ease-in-out 0.66s infinite
@keyframes bounce
  0%, 75%, 100%
    transform translateY(0)
  25%
    transform translateY(-20px)

/* LOADER 3 */

#loader-3
  &:before,
  &:after
    content ""
    width 20px
    height 20px
    position absolute
    top 0
    left calc(50% - 10px)
    background-color #3498db
    animation squaremove 1s linear infinite
    // animation squaremove 1s ease-in-out infinite
  &:after
    bottom 0
    animation-delay 0.5s
@keyframes squaremove
  0%, 100%
    transform translate(0,0) rotate(0)
  25%
    transform translate(40px,40px) rotate(45deg)
  50%
    transform translate(0px,80px) rotate(0deg)
  75%
    transform translate(-40px,40px) rotate(45deg)

/* LOADER 4 */

#loader-4
  span
    display inline-block
    width 20px
    height 20px
    border-radius 100%
    background-color #3498db
    margin 35px 5px
    opacity 0
    &:nth-child(1)
      animation opacitychange 2s ease-in-out infinite
    &:nth-child(2)
      animation opacitychange 2s ease-in-out .66s infinite
    &:nth-child(3)
      animation opacitychange 2s ease-in-out 1.32s infinite
@keyframes opacitychange
  0%, 100%
    opacity 0
  70%
    opacity 1

/* LOADER 5 */

#loader-5
  span
    display block
    position absolute
    left calc(50% - 20px)
    top calc(50% - 20px)
    width 20px
    height 20px
    background-color #3498db
    &:nth-child(2)
      animation moveanimation1 1s ease-in-out infinite
    &:nth-child(3)
      animation moveanimation2 1s ease-in-out infinite
    &:nth-child(4)
      animation moveanimation3 1s ease-in-out infinite
@keyframes moveanimation1
  0%, 100%
    transform translateX(0px)
  75%
    transform translateX(30px)
@keyframes moveanimation2
  0%, 100%
    transform translateY(0px)
  75%
    transform translateY(30px)
@keyframes moveanimation3
  0%, 100%
    transform translate(0px, 0px)
  75%
    transform translate(30px, 30px)

/* LOADER 6 */

#loader-6
  top 40px
  left -2.5px
  span
    display inline-block
    width 5px
    height 20px
    background-color #3498db
    &:nth-child(1)
      animation grow 1s ease-in-out infinite
    &:nth-child(2)
      animation grow 1s ease-in-out 0.15s infinite
    &:nth-child(3)
      animation grow 1s ease-in-out 0.30s infinite
    &:nth-child(4)
      animation grow 1s ease-in-out 0.45s infinite
@keyframes grow
  0%, 100%
    transform scaleY(1)
  50%
    transform scaleY(1.8)

/* LOADER 7 */

#loader-7
  -webkit-perspective 120px
  -moz-perspective 120px
  -ms-perspective 120px
  perspective 120px
  &:before
    content ""
    position absolute
    left 25px
    top 25px
    width 50px
    height 50px
    background-color #3498db
    animation flip 1s infinite
@keyframes flip
  0%
    transform rotate(0)
  50%
    transform rotateY(180deg)
  100%
    transform rotateY(180deg)  rotateX(180deg)

/* LOADER 8 */

#loader-8:before
  content ""
  position absolute
  width 10px
  height 10px
  top calc(50% - 10px)
  left 0px
  background-color #3498db
  animation rotatemove 1s infinite
@keyframes rotatemove
  0%,100%
    transform scale(1) translateX(0px)
  50%
    transform scale(2) translateX(45px)