WordPress Hosting
Free Photos
WordPress Themes

Squares Loader Experiment

HTML
<div class="s s1"></div> <div class="s s2"></div> <div class="s s3"></div> <div class="s s4"></div> <div class="s s5"></div> <div class="s s6"></div> <div class="s s7"></div> <div class="s s8"></div> <div class="s s9"></div>
SCSS
@function posh($del) { @return calc(50vw - #{$del}) } @function posv($del) { @return calc(50vh - #{$del}) } $x: 25px; $w: $x * 2; $c: #34495e; .s { position: fixed; width: $w; height: $w; background-color: $c; transform: rotate(90deg); // opacity: .1; } div.s { animation-iteration-count: infinite; // animation-timing-function: ease-out; animation-duration: 2s; animation-delay: -1s; // animation-play-state: paused; } body { margin: 0; padding: 0; width: 100vw; height: 100vh; // outline: 1px solid blue; background-color: #333; } .s5 { left: posh($w/2 ); top: posv($w/2 ); animation: a5 1s; } .s1 { left: posh($w*1.5); top: posv($w * 1.5); animation: a1 1s; background-color: #2ecc71; } .s2 { left: posh($w/2); top: posv($w*1.5); animation: a2 1s; background-color: #3498db; } .s3 { left: posh($w/-2); top: posv($w * 1.5); animation: a3 1s; background-color: #9b59b6; } .s4 { left: posh($w * 1.5); top: posv($w/2); animation: a4 1s; background-color: #f1c40f; } .s6 { left: posh($w/-2); top: posv($w/2); animation: a6 1s; background-color: #e74c3c; } .s7 { left: posh($w * 1.5); top: posv($w/-2); animation: a7 1s; background-color: #bdc3c7; } .s8 { left: posh($w/2); top: posv($w/-2); animation: a8 1s; background-color: #f39c12; } .s9 { left: posh($w/-2); top: posv($w/-2); animation: a9 1s; background-color: #1abc9c; } @keyframes a1 { from { left: -$w*3; top: -$w*3; transform: scale(3); } } @keyframes a2 { from { left: posh($w/2); top: -$w*3; transform: scale(3); } } @keyframes a3 { from { left: calc(100vw + #{$w}); top: -$w*3; transform: scale(3); } } @keyframes a4 { from { left: -$w*3; top: posv($w/2); transform: scale(3); } } @keyframes a5 { from { transform: scale(3); } } @keyframes a6 { from { left: calc(100vw + #{$w}); top: posv($w/2); transform: scale(3); } } @keyframes a7 { from { left: -$w * 3; top: calc(100vh + #{$w}); transform: scale(3); } } @keyframes a8 { from { left: posh($w/2); top: calc(100vh + #{$w}); transform: scale(3); } } @keyframes a9 { from { left: calc(100vw + #{$w}); top: calc(100vh + #{$w}); transform: scale(3); } }
JAVASCRIPT
Expand for more options Login