Rubik's cube loader

index.html

<div class="loader"></div>

rubik-s-cube-loader.markdown

Rubik's cube loader

Inspired by this gif: http://codepen.io/FilipVitas/pen/aNLgZz

A Pen by Andreas Borgen on CodePen.

License.

style.scss

$piece-colors: (red, orange, dodgerblue, limegreen, white, yellow);
$piece-size: 100px;
$pad-factor: .01;
$anim: 5s ease infinite;

@mixin piece-state($piece, $state, $color: nth($piece-colors, $piece)) {
    $angle: if($piece == 1, if($state == 1, 0deg, -90deg),
                            if($state == 1, 90deg, 0deg));
    transform: rotateY($angle);
    background: $color;
    box-shadow: -$piece-size 0 $color, $piece-size 0 $color;
}

.loader {
    
    position: relative;
    width:  $piece-size;
    height: $piece-size;
    
    //background: rgba(gold, .5);
    box-shadow: (-$piece-size) (-$piece-size)  0 (-$piece-size*$pad-factor)  nth($piece-colors, 1), 
                            0  (-$piece-size)  0 (-$piece-size*$pad-factor)  nth($piece-colors, 5), 
                  $piece-size  (-$piece-size)  0 (-$piece-size*$pad-factor)  nth($piece-colors, 3),
                (-$piece-size)   $piece-size   0 (-$piece-size*$pad-factor)  nth($piece-colors, 3), 
                            0    $piece-size   0 (-$piece-size*$pad-factor)  nth($piece-colors, 4), 
                  $piece-size    $piece-size   0 (-$piece-size*$pad-factor)  nth($piece-colors, 6);;
    transform-style: preserve-3d;
    transform: perspective($piece-size*5) rotateX(-17deg) rotateY(-17deg);
    
    &::before, &::after {
        content: '';
        display: block;
        position: absolute;
        top: $piece-size*$pad-factor; left: $piece-size*$pad-factor;
        width:  $piece-size * (1 - 2*$pad-factor);
        height: $piece-size * (1 - 2*$pad-factor);
        
        background: lime;
        transform-origin: 50% 50% (-$piece-size*1.5);
        @include piece-state(1, 1);
        animation: rotate-1 $anim;
    }
    &::after {
        background: tomato;
        @include piece-state(2, 1);
        animation-name: rotate-2;
    }
    
    @keyframes rotate-1 {
        0%, 100%    { @include piece-state(1, 1, nth($piece-colors, 1)); }
        20%, 24.99% { @include piece-state(1, 2, nth($piece-colors, 1)); }

        25%         { @include piece-state(1, 1, nth($piece-colors, 2)); }
        45%, 49.99% { @include piece-state(1, 2, nth($piece-colors, 2)); }

        50%         { @include piece-state(1, 1, nth($piece-colors, 3)); }
        70%, 74.99% { @include piece-state(1, 2, nth($piece-colors, 3)); }

        75%         { @include piece-state(1, 1, nth($piece-colors, 4)); }
        95%, 99.99% { @include piece-state(1, 2, nth($piece-colors, 4)); }
    }
    @keyframes rotate-2 {
        0%, 100%    { @include piece-state(2, 1, nth($piece-colors, 2)); }
        20%, 24.99% { @include piece-state(2, 2, nth($piece-colors, 2)); }
        
        25%         { @include piece-state(2, 1, nth($piece-colors, 3)); }
        45%, 49.99% { @include piece-state(2, 2, nth($piece-colors, 3)); }
        
        50%         { @include piece-state(2, 1, nth($piece-colors, 4)); }
        70%, 74.99% { @include piece-state(2, 2, nth($piece-colors, 4)); }
        
        75%         { @include piece-state(2, 1, nth($piece-colors, 1)); }
        95%, 99.99% { @include piece-state(2, 2, nth($piece-colors, 1)); }
    }
}


/* Not important */

.demo body {
    display: flex;
    height: 100vh;
    margin: 0;
    background: #111;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}