CSS Loading Animation

CSS Loading Animation.markdown

CSS Loading Animation

Also check out - http://codepen.io/Vestride/pen/vHzyk

A Pen by John Urbank on CodePen.

License.

index.html

.loading
  - (1..4).each do |i|
    .row
      - (1..4).each do |i|
        .point

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import compass

$red: #ca3737
$blue: #4cd4ee
$bgColor: #111

html
  height: 100%

body
  background: $bgColor
  position: relative
  width: 6em
  height: 100%
  margin: 0 auto
  

.loading
  width: 6em
  height: 5em
  position: absolute
  text-align: center
  top: 40%

.point
  width: .6em
  height: .6em
  border-radius: 50%
  margin: 0 .35em .6em
  display: inline-block

@for $i from 1 through 25
  .point:nth-child(#{$i})
    animation: color #{($i*100) + 1000}ms infinite ease-in-out

  .row:nth-child(#{$i})
    animation: opacity #{($i*100) + 1000}ms infinite ease-in-out

@keyframes opacity
  from, to
    opacity: 0
  50%
    opacity: 1

@keyframes color
  from, to
    background: $red
    -webkit-filter: blur(1px)
  50%
    background: $blue
    -webkit-filter: blur(2px)