﻿body {
    background: #20A4CB;
}

.init-spinner {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99999999;
    background: #20A4CB;
}

    .init-spinner::after {
        position: absolute;
        top: calc(50% - 74px);
        left: calc(50% - 54px);
        transform: translate(-50%, -50%);
        content: '';
        border: 4px solid #20A4CB;
        border-top: 4px solid #fff;
        border-radius: 250%;
        width: 100px;
        height: 100px;
        animation: spin 2s linear infinite;
        -webkit-animation: spin 2s linear infinite;
    }

    .init-spinner::before {
        position: absolute;
        top: calc(50% - 69px);
        left: calc(50% - 49px);
        transform: translate(-50%, -50%);
        content: '';
        border: 4px solid #20A4CB;
        border-top: 4px solid #fff;
        border-radius: 250%;
        width: 90px;
        height: 90px;
        animation: spin 1.1s linear infinite;
        -webkit-animation: spin 1.1s linear infinite;
    }

    .init-spinner .logo {
        position: absolute;
        top: calc(50% - 20px);
        left: calc(50% - 2px);
        transform: translate(-50%, -50%);
        width: 55px;
    }

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
