.cp-spinner {
    width: 30px;
    height: 30px;
    display: inline-block;
    box-sizing: border-box;
    position: relative
}

.cp-eclipse {
    width: 12px;
    height: 12px;
    display: inline-block;
    box-sizing: border-box;
    border-radius: 50%;
    background: #f3d53f;
    margin: 12px;
    animation: cp-eclipse-animate 1s ease-out infinite
}

.cp-eclipse:before {
    border-radius: 50%;
    content: " ";
    width: 48px;
    height: 48px;
    display: inline-block;
    box-sizing: border-box;
    border-top: solid 6px transparent;
    border-right: solid 6px #f3d53f;
    border-bottom: solid 6px transparent;
    border-left: solid 6px transparent;
    position: absolute;
    top: -18px;
    left: -18px
}

.cp-eclipse:after {
    border-radius: 50%;
    content: " ";
    width: 48px;
    height: 48px;
    display: inline-block;
    box-sizing: border-box;
    border-top: solid 6px transparent;
    border-right: solid 6px transparent;
    border-bottom: solid 6px transparent;
    border-left: solid 6px #f3d53f;
    position: absolute;
    top: -18px;
    right: -18px
}

@keyframes cp-eclipse-animate {
    0% {
        transform: rotate(0)
    }

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