html { display : none; }

[data-loader='ball-auto'] {
    width: 8px;
    height: 8px;

    animation: ball-auto 2.5s infinite linear;

    box-shadow: 0 -20px 0 -3px #de5454,
    20px 0 0 -3px #1ecaba,
    0 20px 0 -3px #ffeb02,
    -20px 0 0 -3px #2c89e8;
}

@-webkit-keyframes ball-auto {
    0% {
        transform: rotate(0);
    }
    45% {
        transform: rotate(360deg);

        border-radius: 100%;
        box-shadow: 0 -20px 0 10px #de5454,
        20px 0 0 10px #1ecaba,
        0 20px 0 10px #decf20,
        -20px 0 0 10px #2c89e8;
    }
    100% {
        transform: rotate(720deg);
    }
}

@-moz-keyframes ball-auto {
    0% {
        transform: rotate(0);
    }
    45% {
        transform: rotate(360deg);

        border-radius: 100%;
        box-shadow: 0 -20px 0 10px #de5454,
        20px 0 0 10px #1ecaba,
        0 20px 0 10px #decf20,
        -20px 0 0 10px #2c89e8;
    }
    100% {
        transform: rotate(720deg);
    }
}

@-o-keyframes ball-auto {
    0% {
        transform: rotate(0);
    }
    45% {
        transform: rotate(360deg);

        border-radius: 100%;
        box-shadow: 0 -20px 0 10px #de5454,
        20px 0 0 10px #1ecaba,
        0 20px 0 10px #decf20,
        -20px 0 0 10px #2c89e8;
    }
    100% {
        transform: rotate(720deg);
    }
}

@keyframes ball-auto {
    0% {
        transform: rotate(0);
    }
    45% {
        transform: rotate(360deg);

        border-radius: 100%;
        box-shadow: 0 -20px 0 10px #de5454,
        20px 0 0 10px #1ecaba,
        0 20px 0 10px #decf20,
        -20px 0 0 10px #2c89e8;
    }
    100% {
        transform: rotate(720deg);
    }
}

.preloader {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}