.circle {
    width: 325px;
    height: 325px;
    display: block;
    border-radius: 500%;
    position: relative;
    animation: rotation 2s linear infinite;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.circle .inner {
    width: 200px;
    height: 200px;
    background: #036C91;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 100%;
    box-shadow: 0 -130px 0 -75px #036C91;
    animation: switch 3s ease-in-out infinite;
}
@keyframes switch {
    0% {
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 200px;
        height: 200px;
        box-shadow: 0 -130px 0 -75px #036C91;
    }
    25% {
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 200px;
        height: 200px;
        box-shadow: 0 -130px 0 -75px #036C91;
    }
    50% {
        top: calc(100% - 55px);
        width: 50px;
        height: 50px;
        box-shadow: 0 -130px 0 75px #A5CE3A;
        transform: translateX(-50%) translateY(0);
    }
    75% {
        top: calc(100% - 55px);
        width: 50px;
        height: 50px;
        box-shadow: 0 -130px 0 75px #A5CE3A;
        transform: translateX(-50%) translateY(0);
    }
    100% {
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: 200px;
        height: 200px;
        box-shadow: 0 -130px 0 -75px #036C91;
    }
}