react-jam-ui/components/Loader/styles.styl

React JAM UI components

@import '../variables.styl';

loader-cube-grid($params) {
    width: 60px;
    height: 60px;

    .sk-cube {
        width: 33%;
        height: 33%;
        background-color: $params.color;
        float: left;
        animation: cubeGridScaleDelay 1.3s infinite ease-in-out; 
    }

    .sk-cube1 { animation-delay: 0.2s; }
    .sk-cube2 { animation-delay: 0.3s; }
    .sk-cube3 { animation-delay: 0.4s; }
    .sk-cube4 { animation-delay: 0.1s; }
    .sk-cube5 { animation-delay: 0.2s; }
    .sk-cube6 { animation-delay: 0.3s; }
    .sk-cube7 { animation-delay: 0s; }
    .sk-cube8 { animation-delay: 0.1s; }
    .sk-cube9 { animation-delay: 0.2s; }

    @keyframes cubeGridScaleDelay {
        0%, 70%, 100% {
            transform: scale3D(1, 1, 1);
        } 35% {
            transform: scale3D(0, 0, 1);
        } 
    }
}

.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);

    for type, params in $loaders {
        $mixin = lookup('loader-' + params.type)

        if (type == 'default') {
            & {
                $mixin(params)
            }
        } else {      
            &.loader-{type} {
                $mixin(params)
            }
        }
    }
}