body, html {
background: white;
}

.spinner {
    top: 50%;
    left: 50%;
    width: 70px;
    height: 70px;
    position: absolute;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

.spinner__circle-wrapper {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

    .spinner__circle-wrapper:nth-child(1) {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .spinner__circle-wrapper:nth-child(2) {
        -webkit-transform: rotate(340deg);
        transform: rotate(340deg);
    }

    .spinner__circle-wrapper:nth-child(3) {
        -webkit-transform: rotate(320deg);
        transform: rotate(320deg);
    }

    .spinner__circle-wrapper:nth-child(4) {
        -webkit-transform: rotate(300deg);
        transform: rotate(300deg);
    }

    .spinner__circle-wrapper:nth-child(5) {
        -webkit-transform: rotate(280deg);
        transform: rotate(280deg);
    }

    .spinner__circle-wrapper:nth-child(6) {
        -webkit-transform: rotate(260deg);
        transform: rotate(260deg);
    }

.spinner__circle {
    top: 50%;
    left: 50%;
    width: 10%;
    height: 10%;
    margin-top: -50%;
    margin-left: -5%;
    position: absolute;
    background: #6c757d;
    -webkit-transform-origin: 50% 500%;
    transform-origin: 50% 500%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: rotate 5000ms infinite cubic-bezier(0.785, 0.135, 0.150, 0.860);
    animation: rotate 5000ms infinite cubic-bezier(0.785, 0.135, 0.150, 0.860);
}

.spinner__circle-wrapper:nth-child(1) .spinner__circle {
    -webkit-animation-delay: 0ms;
    animation-delay: 0ms;
}

.spinner__circle-wrapper:nth-child(2) .spinner__circle {
    -webkit-animation-delay: 50ms;
    animation-delay: 50ms;
}

.spinner__circle-wrapper:nth-child(3) .spinner__circle {
    -webkit-animation-delay: 100ms;
    animation-delay: 100ms;
}

.spinner__circle-wrapper:nth-child(4) .spinner__circle {
    -webkit-animation-delay: 150ms;
    animation-delay: 150ms;
}

.spinner__circle-wrapper:nth-child(5) .spinner__circle {
    -webkit-animation-delay: 200ms;
    animation-delay: 200ms;
}

.spinner__circle-wrapper:nth-child(6) .spinner__circle {
    -webkit-animation-delay: 250ms;
    animation-delay: 250ms;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }

    42% {
        -webkit-transform: rotate(360deg);
    }

    62% {
        opacity: 1;
    }

    64% {
        opacity: 0;
    }

    84% {
        -webkit-transform: rotate(720deg);
        opacity: 0;
    }

    85% {
        -webkit-transform: rotate(920deg);
        opacity: 0;
    }

    88% {
        opacity: 0;
    }

    90% {
        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(1080deg);
        opacity: 1;
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    42% {
        transform: rotate(360deg);
    }

    62% {
        opacity: 1;
    }

    64% {
        opacity: 0;
    }

    84% {
        transform: rotate(720deg);
        opacity: 0;
    }

    85% {
        transform: rotate(920deg);
        opacity: 0;
    }

    88% {
        opacity: 0;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: rotate(1080deg);
        opacity: 1;
    }
}