.box{
    width: 100%;
    height: 100%;
    background-color: #121229;
    position: relative;
}

.box .icon{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.box .icon img{
    width: 1.11rem;
    height: .96rem;
}

.box .garden{
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    border: .02rem solid #27273c;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.box .spot{
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -1.8rem;
    margin-top: -1.8rem;
    animation: turn 2s linear;
}

.box .spot img{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%,50%);
    width: .26rem;
    height: .26rem;
}

@keyframes turn {
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

.circleProgress_wrapper {
    width: 3.6rem;
    height: 3.6rem;
    position: absolute;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    /* border: 1px solid #ddd; */
}

.wrapper {
    width: 1.8rem;
    height: 3.6rem;
    position: absolute;
    top: 0;
    overflow: hidden;
}

.right {
    right: 0;
}

.left {
    left: 0;
}

.circleProgress {
    width: 3.6rem;
    height: 3.6rem;
    border: .02rem solid transparent;
    border-radius: 50%;
    position: absolute;
    top: 0;
    box-sizing: border-box;
}


.rightcircle {
    border-top: .02rem solid #029be2;
    border-right: .02rem solid #029be2;
    right: 0;
    animation: circleProgressLoad_right 2s linear forwards;
}

.leftcircle {
    border-bottom: .02rem solid #029be2;
    border-left: .02rem solid #029be2;
    left: 0;
    animation: circleProgressLoad_left 2s linear forwards;
}

@keyframes circleProgressLoad_left  {
    0% {
        transform: rotate(-135deg);
    }

    50%,
    100% {
        transform: rotate(45deg);
    }
}

@keyframes circleProgressLoad_right {

    0%,
    50% {
        transform: rotate(-135deg);
    }

    100% {
        transform: rotate(45deg);
    }
}