svg {
    display: block;
    margin: auto;
    max-width: 100%;
    width: 256px;
    height: 256px;
}

svg.loading {
    opacity: 0;
    position: absolute;
    left: -99999px;
}

.top {
    animation: moveT 2s ease 0s infinite;
}

.top-right {
    animation: moveTR 2s ease 0.15s infinite;
}

.bottom-right {
    animation: moveBR 2s ease 0.3s infinite;
}

.bottom {
    animation: moveB 2s ease 0.45s infinite;
}

.bottom-left {
    animation: moveBL 2s ease 0.6s infinite;
}

.top-left {
    animation: moveTL 2s ease 0.75s infinite;
}

@keyframes moveT {
    30% {
        transform: translateY(5.8%);
    }
    60% {
        transform: translate(0);
    }
}

@keyframes moveTR {
    30% {
        transform: translate(-5.2%, 3.5%);
    }
    60% {
        transform: translate(0);
    }
}

@keyframes moveBR {
    30% {
        transform: translate(-5.2%, -3.5%);
    }
    60% {
        transform: translate(0);
    }
}

@keyframes moveB {
    30% {
        transform: translateY(-5.8%);
    }
    60% {
        transform: translate(0);
    }
}

@keyframes moveBL {
    30% {
        transform: translate(5.2%, -3.5%);
    }
    60% {
        transform: translate(0);
    }
}

@keyframes moveTL {
    30% {
        transform: translate(5.2%, 3.5%);
    }
    60% {
        transform: translate(0);
    }
}