Four Squares Loader

HAML
.square %i %i %i %i
SCSS
@import "compass/css3"; body { background: #e74c3c; } .square{ width: 75px; height:75px; position: absolute; right:50%; top:50%; margin-top:-35px; margin-right:-35px; @include transform(rotate(45deg)); } .square i{ width: 124px; height: 124px; background: rgba(255,255,255,0.3); position: absolute; &:nth-child(1){ left:0; top: 0; animation:square1 2.2s ease-in-out infinite; } &:nth-child(2){ right:0; top: 0; animation:square2 2.2s ease-in-out infinite; } &:nth-child(3){ right:0; bottom: 0; animation:square3 2.2s ease-in-out infinite; } &:nth-child(4){ left:0; bottom: 0; animation:square4 2.2s ease-in-out infinite; } } @keyframes square1{ 25%{transform:translate(-55px,-55px);} 85%{transform:translate(-55px,-55px);} 100%{transform:translate(0,0) rotate(90deg);} } @keyframes square2{ 25%{transform:translate(55px,-55px);} 85%{transform:translate(55px,-55px);} 100%{transform:translate(0,0) rotate(90deg);} } @keyframes square3{ 25%{transform:translate(55px,55px);} 85%{transform:translate(55px,55px);} 100%{transform:translate(0,0) rotate(90deg);} } @keyframes square4{ 25%{transform:translate(-55px,55px);} 85%{transform:translate(-55px,55px);} 100%{transform:translate(0,0) rotate(90deg);} }
JAVASCRIPT
Expand for more options Login