@keyframes loading-spinner-cc {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.loading-spinner-cc div {
    box-sizing: border-box !important
}

.loading-spinner-cc > div {
    position: absolute;
    width: 144px;
    height: 144px;
    top: 28px;
    left: 28px;
    border-radius: 50%;
    border: 16px solid #000;
    border-color: #0076ca transparent #0076ca transparent;
    animation: loading-spinner-cc 1s linear infinite;
}

    .loading-spinner-cc > div:nth-child(2), .loading-spinner-cc > div:nth-child(4) {
        width: 108px;
        height: 108px;
        top: 46px;
        left: 46px;
        animation: loading-spinner-cc 1s linear infinite reverse;
    }

    .loading-spinner-cc > div:nth-child(2) {
        border-color: transparent #fee800 transparent #fee800
    }

    .loading-spinner-cc > div:nth-child(3) {
        border-color: transparent
    }

        .loading-spinner-cc > div:nth-child(3) div {
            position: absolute;
            width: 100%;
            height: 100%;
            transform: rotate(45deg);
        }

            .loading-spinner-cc > div:nth-child(3) div:before, .loading-spinner-cc > div:nth-child(3) div:after {
                content: "";
                display: block;
                position: absolute;
                width: 16px;
                height: 16px;
                top: -16px;
                left: 48px;
                background: #0076ca;
                border-radius: 50%;
                box-shadow: 0 128px 0 0 #0076ca;
            }

            .loading-spinner-cc > div:nth-child(3) div:after {
                left: -16px;
                top: 48px;
                box-shadow: 128px 0 0 0 #0076ca;
            }

    .loading-spinner-cc > div:nth-child(4) {
        border-color: transparent;
    }

        .loading-spinner-cc > div:nth-child(4) div {
            position: absolute;
            width: 100%;
            height: 100%;
            transform: rotate(45deg);
        }

            .loading-spinner-cc > div:nth-child(4) div:before, .loading-spinner-cc > div:nth-child(4) div:after {
                content: "";
                display: block;
                position: absolute;
                width: 16px;
                height: 16px;
                top: -16px;
                left: 30px;
                background: #fee800;
                border-radius: 50%;
                box-shadow: 0 92px 0 0 #fee800;
            }

            .loading-spinner-cc > div:nth-child(4) div:after {
                left: -16px;
                top: 30px;
                box-shadow: 92px 0 0 0 #fee800;
            }

.loading-spinner {
    width: 200px;
    height: 200px;
    display: inline-block;
    overflow: hidden;
    background: none;
}

.loading-spinner-cc {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0; 
}

    .loading-spinner-cc div {
        box-sizing: content-box;
    }