CSS3 Transform Loader - squareception

CSS3 Transform Loader - squareception.markdown

CSS3 Transform Loader - squareception

Man I love CSS3 transorms...

Anyway. Small squares become a bigger square which then becomes a small square which is part of a bigger square which then becomes a small square which is part of a bigger square which then becomes a small square which is part of a bigger square which then becomes a small square...

A Pen by Les on CodePen.

License.

index.html

.group  
  .bigSqr
    .square.first
    .square.second
    .square.third
    .square.fourth
  .text loading
div.link Chat to me on 
  a(href="https://ello.co/lesbaa") Ello :-)

script.js

// Nup

style.css

$blue: #0AE
$wht: #FFF

@import url(http://fonts.googleapis.com/css?family=Roboto:100)

body
  background: $blue
  text-align: center
  line-height: 100vh

.group
  position: relative
  display: inline-block
  line-height: 16px
  
.bigSqr
  position: relative
  display: inline-block
  width: 40px
  height: 40px
  overflow: hidden
  transform-origin: bottom left
  animation: bigSqrShrink 1s linear infinite
  
.square
  position: absolute
  width: 20px
  height: 20px
  background: $wht
  
.first
  left: 0px
  top: 20px
  
  
.second
  left: 20px
  top: 20px
  animation: drop2 1s linear infinite
  
.third
  left: 0px
  top: 0px
  animation: drop3 1s linear infinite
  
.fourth
  left: 20px
  top: 0px
  animation: drop4 1s linear infinite
  
.text
  line-height: 16px
  font-family: 'Roboto'
  color: $wht
  display: block
  margin: 10px auto
  padding: 3px
  
@keyframes bigSqrShrink
  0%
    transform: scale(1)
  90%
    transform: scale(1)
  100%
    transform: scale(0.5)
  
@keyframes drop2
  0%
    transform: translateY(-50px)
  25%
    transform: translate(0)
  100%
    transform: translate(0)
    
@keyframes drop3
  0%
    transform: translateY(-50px)
  50%
    transform: translate(0)
  100%
    transform: translate(0)
 
@keyframes drop4
  0%
    transform: translateY(-50px)
  75%
    transform: translate(0)
  100%
    transform: translate(0)
  
.link 
  line-height: 1em
  position: absolute
  bottom: 0
  right: 20px
  width: 300px
  height: 50px
  font-family: "Open Sans","Roboto",Arial,sans-serif
  text-align: right

.link > a 
  text-decoration: none
  color: #FF0