Splash Loader

@import "compass/css3" body width: 100vw height: 100vh font-family: monospace background: linear-gradient(135deg, #124bfe, darken(#124bfe, 25%)) .blobs filter: url('#goo') position: absolute top: 0 left: 0 bottom: 0 right: 0 z-index: 200 // animation: rotate 4s linear infinite $d: 67px $color: #fff @keyframes rotate from transform: rotate(0deg) to transform: rotate(360deg) @keyframes wobble from transform: scale(0.1) to transform: scale(4) .blob position: absolute background: #111 left: 50% top: 50% width: 100px height: 100px line-height: 100px text-align: center color: black font-size: 40px border-radius: 100% margin-top: -50px margin-left: -50px transition: all 1s cubic-bezier(0.770, 0.000, 0.175, 1.000) transform: translate3d(0, 0, 0) background: $color // background: linear-gradient(135deg, #124bfe, darken(#124bfe, 20%)) trasnform-origin: 0 0 // box-shadow: 0 10px 100px rgba(0,0,0,0.1) &:nth-child(17) transform: scale(1) animation: wobble 8s alternate ease-in-out infinite @for $i from 1 through 8 $r: 220px $a: (pi() / 4) * ($i) $x: $r * cos($a) $y: $r * sin($a) @debug: $x @keyframes move-#{$i} from transform: translate3d(0, 0, 0) scale(1) to transform: translate3d($x, $y, 0) scale(0.33) &:nth-child(#{$i}) animation: move-#{$i} 2s ease-in-out alternate -#{$i/2}s infinite @for $i from 9 through 17 $r: 40px $a: (pi() / 4) * ($i - 8) $x: $r * cos($a) $y: $r * sin($a) @debug: $x @keyframes move2-#{$i} from transform: translate3d(0, 0, 0) scale(1) to transform: translate3d($x, $y, 0) scale(1.6) &:nth-child(#{$i}) animation: move2-#{$i} 2s ease-in-out alternate -#{$i/2.1}s infinite //----and a little bit of math //function for power @function pow($number, $exp) $value: 1 @if $exp > 0 @for $i from 1 through $exp $value: $value * $number @else if $exp < 0 @for $i from 1 through -$exp $value: $value / $number @return $value // function for factorial @function fact($number) $value: 1 @if $number > 0 @for $i from 1 through $number $value: $value * $i @return $value // function which returns pi @function pi() @return 3.14159265359 //function for fixing unit @function rad($angle) $unit: unit($angle) $unitless: $angle / ($angle * 0 + 1) @if $unit == deg $unitless: $unitless / 180 * pi() @return $unitless //function which returns cosine of an angle @function cos($angle) $cos: 0 $angle: rad($angle) @for $i from 0 through 10 $cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i) @return $cos //function which returns sine of an angle @function sin($angle) $sin: 0 $angle: rad($angle) @for $i from 0 through 10 $sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1) @return $sin @function tan($angle) @return sin($angle) / cos($angle)