react-jam-ui/components/Loader/themes/default.styl

React JAM UI components

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

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

    i:nth-child(1) { animation-delay: 0.2s; }
    i:nth-child(2) { animation-delay: 0.3s; }
    i:nth-child(3) { animation-delay: 0.4s; }
    i:nth-child(4) { animation-delay: 0.1s; }
    i:nth-child(5) { animation-delay: 0.2s; }
    i:nth-child(6) { animation-delay: 0.3s; }
    i:nth-child(7) { animation-delay: 0s; }
    i:nth-child(8) { animation-delay: 0.1s; }
    i:nth-child(9) { animation-delay: 0.2s; }

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