SVG Cube Loader

HAML
.cont - (1..10).each do |i| %svg{:class => "cu#{i}" " cu"}(height="300" width="260" viewBox="0 0 260 300") %polygon.p1(points="130,0 130,150 0,225 0,75") %polygon.p2(points="130,0 260,75 260,225 130,150") %polygon.p3(points="130,150 260,225 130,300 0,225")
SASS
$cb: #333 $c1: #63b995 $c2: #86deb7 $c3: #adeee3 $cp: $c1, $c2, $c3 $wi: 60px $he: $wi * 1.15384615385 $t: 1s $d: $t / 11 @keyframes anim 50% transform: scale(1.1) rotate(2deg) opacity: 0.9 @keyframes anim2 50% stroke-width: 10px body background-color: $cb height: 100vh margin: 0 display: flex align-items: center justify-content: center .cont width: $wi*4 height: $he*4-($he/4)*3 .cu overflow: visible height: $he width: $wi display: inline-block margin: 0 auto float: left box-sizing: border-box position: relative animation: anim $t infinite opacity: 0.8 > polygon animation: anim2 $t infinite stroke: $cb transform-origin: 50% 50% @for $i from 1 through 3 .p#{$i} fill: nth($cp, $i) .cu2, .cu4, .cu7 clear: left .cu1 left: $wi*2-$wi/2 .cu2,.cu3 left: $wi top: -$he/4 .cu4,.cu5,.cu6 left: $wi/2 top: -$he/2 .cu7,.cu8,.cu9,.cu10 top: -$he/2-$he/4 // Animation @for $i from 1 through 10 .cu#{$i} animation-delay: $d * $i filter: hue-rotate($i*36deg) > polygon animation-dely: $d * $i
JAVASCRIPT
Expand for more options Login