LEEWqX

index.haml

.spinner
  .rect1
  .rect2 
  .rect3

LEEWqX.markdown

LEEWqX

A Pen by GiVe on CodePen.

License.

style.sass

.spinner
  margin: 105px auto
  width: 40px
  height: 10px
  font-size: 10px
  > div
    height: 100%
    width: 100%
    display: block
    margin-bottom: 0.6em
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out
    animation: stretchdelay 1.2s infinite ease-in-out
  .rect2
    -webkit-animation-delay: -1s
    animation-delay: -1s
  .rect3
    -webkit-animation-delay: -0.8s
    animation-delay: -0.8s

@-webkit-keyframes stretchdelay
  0%, 40%, 100%
    -webkit-transform: scaleX(0.8)
    background-color: #2e5865
    box-shadow: 0 0 0 rgba(10,10,10,.1)
  20%
    -webkit-transform: scaleX(1)
    background-color: #00b192
    box-shadow: 0 5px 6px rgba(10,10,10,.4)


@keyframes stretchdelay
  0%, 40%, 100%
    background-color: #2e5865
    transform: scaleX(0.8)
    -webkit-transform: scaleX(0.8)
    box-shadow: 0 0 0 rgba(10,10,10,.1)
  20%
    background-color: #00b192
    transform: scaleY(1)
    -webkit-transform: scaleX(1)
    box-shadow: 0 5px 6px rgba(10,10,10,.4)