.container
  h1 Fancy CSS Loaders
  p Single element pure CSS spinners & loaders
  .loader-list
    .loader-item
      .loader.loader-1
    .loader-item
      .loader.loader-2
    .loader-item
      .loader.loader-3

    .loader-item
      .loader.loader-4
    .loader-item
      .loader.loader-5
    .loader-item
      .loader.loader-6

    .loader-item
      .loader.loader-7
    .loader-item
      .loader.loader-8
    .loader-item
      .loader.loader-9

@import url('https://fonts.googleapis.com/css?family=Delius+Unicase')

*, *::before, *::after
  box-sizing: border-box

html, body
  width: 100%
  height: 100%
  display: flex
  background: #00ACC1
  color: #80DEEA
  font-family: 'Delius Unicase', cursive

h1, p
  width: 100%
  text-align: center

h1
  margin: 0 0 10px

p
  font-size: 10px
  margin: 0 0 50px

.container
  margin: auto

.loader
  width: 30px
  height: 30px
  position: relative
  margin: auto

  &::before, &::after
    content: ''
    position: absolute

  &-list
    display: grid
    grid-template: repeat(3, 120px) / repeat(3, 120px)
    grid-gap: 30px
  
  &-item
    display: flex
    background: rgba(0, 0, 0, 0.05)
    
.loader-1
  &::before, &::after
    border-radius: 50%
    width: 100%
    height: 100%
    top: calc(50% - 15px)
    left: calc(50% - 15px)
    animation:
      duration: 3s
      timing-function: linear
      iteration-count: infinite
  &::before
    border:
      style: solid
      width: 3px 3px 3px 0
      color: #fff transparent transparent
    transform: scale(0.3) rotate(0deg)
    opacity: 0.5
    animation-name: foregroundCircle
  &::after
    background: #fff
    opacity: 0.5
    transform: scale(0)
    animation-name: backgroundCircle

@keyframes foregroundCircle
  0%
    transform: scale(0.3) rotate(0deg)
  12.5%
    transform: scale(0.3) rotate(180deg)
  25%, 50%
    opacity: 1
  50%
    transform: scale(1) rotate(720deg)
  100%
    transform: scale(0.3) rotate(1800deg)
    opacity: 0.5

@keyframes backgroundCircle
  12.5%
    transform: scale(0.3)
  90%, 100%
    transform: scale(2)
    opacity: 0

.loader-2
  perspective: 500px
  transform-style: preserve-3d
  transform: rotate3d(2, 1, -1, 90deg)
  &::before, &::after
    border-radius: 50%
    width: 16px
    height: 16px
    top: calc(50% - 8px)
    background: #fff
    animation:
      duration: 3s
      timing-function: linear
      iteration-count: infinite
  &::before
    left: 0
    opacity: 0.7
    border-top-right-radius: 0
    transform-origin: right top
    animation-name: flapL
  &::after
    left: 50%
    opacity: 0.5
    border-top-left-radius: 0
    transform-origin: left top
    animation-name: flapR

@keyframes flapL
  25%, 50%
    transform: rotateY(-45deg)
  12.5%, 37.5%, 65%
    transform: rotateY(45deg)
  0%, 100%
    transform: rotateY(-30deg)

@keyframes flapR
  25%, 50%
    transform: rotateY(45deg)
  12.5%, 37.5%, 65%
    transform: rotateY(-45deg)
  0%, 100%
    transform: rotateY(30deg)

.loader-3
  &::before, &::after
    border-radius: 50%
    animation:
      duration: 1s
      timing-function: ease-in-out
      iteration-count: infinite
  &::before
    width: 16px
    height: 16px
    top: calc(50% - 8px) 
    left: calc(50% - 8px)
    border-bottom-right-radius: 0
    box-shadow: 0 0 0 2px #fff
    background: radial-gradient(transparent 0, transparent 3px, #fff 3px)
    transform: rotate(45deg)
    animation-name: mapPin
  &::after
    width: 4px
    height: 2px
    opacity: 0.8
    top: 100%
    left: calc(50% - 2px)
    background: #fff
    animation-name: mapPinShadow
  
@keyframes mapPin
  50%
    transform: rotate(45deg) translate(-50%, -50%)

@keyframes mapPinShadow
  50%
    transform: scaleX(3)
    opacity: 0.2
    
.loader-4
  &::before, &::after
    border-radius: 50%
    width: 8px
    height: 8px
    background: #fff
    top: calc(50% - 4px)
    animation:
      duration: 1s
      timing-function: linear
      iteration-count: infinite
  &::before
    left: 0
    animation-name: firstDot
  &::after
    right: 0
    opacity: 0.8
    animation-name: secondDot
  
@keyframes firstDot
  0%, 50%
    transform-origin: 15px center
  50%
    transform: rotateZ(180deg)
  51%, 100%
    transform-origin: center
  51%
    transform: rotateZ(180deg) translateX(-22px)
  100%
    transform: rotateZ(180deg) translateX(0)

@keyframes secondDot
  0%, 50%
    transform: rotateZ(-180deg)
  51%, 100%
    transform-origin: -8px center

.loader-5
  &::before, &::after
    border-radius: 50%
    background: #fff
    width: 16px
    height: 16px
    top: calc(50% - 8px)
    left: calc(50% - 8px)
    animation:
      duration: 2s
      timing-function: ease-in-out
      iteration-count: infinite
  &::before
    opacity: 0.7
    animation-name: upperDot
  &::after
    opacity: 0.5
    animation-name: lowerDot
  
@keyframes upperDot
  25%
    transform: translateY(-50%)
  47.5%, 52.5%
    transform: translateY(0)
  75%
    transform: translateY(50%)

@keyframes lowerDot
  25%
    transform: translateY(50%)
  47.5%, 52.5%
    transform: translateY(0)
  75%
    transform: translateY(-50%)

.loader-6
  border-radius: 50%
  width: 4px
  height: 4px
  background: #fff
  animation-name: pacmanDot
  transform: translateX(14px)
  &::before, &::after
    border-radius: 50%
    border: 14px solid #fff
    border-right-color: transparent
    top: -12px
    left: -24px
  &, &::before, &::after
    animation:
      duration: .5s
      timing-function: linear
      iteration-count: infinite
  &::before
    animation-name: upperJaw
  &::after
    animation-name: lowerJaw
  
@keyframes pacmanDot
  0%, 50%
    background: #fff
  51%, 100%
    background: none
  0%, 100%
    transform: translateX(19px)
  50%
    transform: translateX(14px)

@keyframes upperJaw
  50%
    transform: rotate(50deg) translate(2px, -2px)

@keyframes lowerJaw
  50%
    transform: rotate(-50deg) translate(2px, 2px)

.loader-7
  border: 1px solid #fff
  height: 14px
  width: 32px
  &::before
    width: 4px
    height: 10px
    background: #fff
    left: 1px
    top: calc(50% - 5px)
    animation: blockBar 2s infinite
  
@keyframes blockBar
  0%, 80%
    opacity: 1
  0%, 20%
    box-shadow: 8px 0 0 0 rgba(255, 255, 255, 0), 16px 0 0 0 rgba(255, 255, 255, 0), 24px 0 0 0 rgba(255, 255, 255, 0)
  21%, 40%
    box-shadow: 8px 0 0 0 rgba(255, 255, 255, 1), 16px 0 0 0 rgba(255, 255, 255, 0), 24px 0 0 0 rgba(255, 255, 255, 0)
  41%, 60%
    box-shadow: 8px 0 0 0 rgba(255, 255, 255, 1), 16px 0 0 0 rgba(255, 255, 255, 1), 24px 0 0 0 rgba(255, 255, 255, 0)
  61%, 80%
    box-shadow: 8px 0 0 0 rgba(255, 255, 255, 1), 16px 0 0 0 rgba(255, 255, 255, 1), 24px 0 0 0 rgba(255, 255, 255, 1)
  81%, 100%
    opacity: 0

.loader-8
  &::before, &::after
    border-radius: 50%
    width: 10px
    height: 10px
    top: calc(50% - 5px)
    left: calc(50% - 5px)
    animation:
      duration: 3s
      timing-function: linear
      iteration-count: infinite
  &::before
    background: #fff
    animation-name: droplets
  &::after
    border: 1px solid #fff
    opacity: 0
    animation-name: ripples
  
@keyframes droplets
  0%, 15%
    opacity: 1
  15%
    transform: scale(.5)
  60%
    transform: scale(4)
  60%, 90%
    opacity: 0
  90%
    transform: scale(3)
  95%, 100%
    opacity: 1
  100%
    transform: scale(1)

@keyframes ripples
  0%, 30%
    opacity: 0
    transform: scale(1)
  60%
    opacity: .3
  90%
    transform: scale(3)
  100%
    opacity: 0
    
    
.loader-9
  border: 1px solid rgba(255, 255, 255, 0.3)
  border-radius: 50%
  animation: counterClockwise 4s linear infinite
  &::before, &::after
    border-radius: 50%
  &::before
    width: 8px
    height: 8px
    background: #fff
    animation: clockwise 4s linear infinite
  &::after
    width: 4px
    height: 4px
    top: 8px
    left: 8px
    background: #fff
    transform-origin: -4px -4px
    animation: counterClockwise 1s linear infinite
  
@keyframes clockwise
  to
    transform: rotate(1turn)
  
@keyframes counterClockwise
  to
    transform: rotate(-1turn)