#loadingCircleWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100vw;
    background: white;
    z-index: 9999;
}

#circleAnimCont .circular {
    height: 360px;
    width: 360px;
    position: relative;
}

#circleAnimCont .circular .inner,
#circleAnimCont .circular .outer,
#circleAnimCont .circular .circle {
    position: absolute;
    z-index: 6;
    height: 100%;
    width: 100%;
    border-radius: 100%;
}

#circleAnimCont .circular .inner {
    top: 50%;
    left: 50%;
    height: 300px;
    width: 300px;
    margin: -150px 0 0 -150px;
    background-color: white;
    border-radius: 100%;
}

#circleAnimCont .circular .circle {
    z-index: 1;
    box-shadow: none;
}

#circleAnimCont .circular .eye {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 280px;
}

#circleAnimCont .circular .bar {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #fff;
    -webkit-border-radius: 100%;
    clip: rect(0px, 360px, 180px, 0px);
    background-size: 100% 100%;
    background-position: 0px 0px;
    background-image: repeating-conic-gradient(from 0deg at 50% 50%, #bed7e9 98%, #bed7e9 99%, #00FFFF00 100%, #00FFFF00 100%);
}

#circleAnimCont .circle .bar .progress {
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-border-radius: 100%;
    clip: rect(0px, 360px, 180px, 0px);
}

#circleAnimCont .circle .bar .progress {
    background: #00c8d5;
}

@keyframes left {
    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

#circleAnimCont .circle .right {
    z-index: 3;
    transform: rotate(180deg);
}

@keyframes right {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

#circleAnimCont .circle .left .progress {
    z-index: 1;
    animation: left 4s linear both reverse infinite;
}

#circleAnimCont .circle .right .progress {
    animation: right 4s linear both reverse infinite;
}