로딩중 spin animation

 

<!-- s: road layer pop -->
<div class="road_pop_container">
    <div class="road_pop_wrap">
        <div class="road_pop_spin_wrap">
            <div class="road_pop_spin"></div>
            <div class="road_pop_spin"></div>
            <div class="road_pop_spin"></div>
            <div class="road_pop_spin"></div>
            <div class="road_pop_spin"></div>
            <div class="road_pop_spin"></div>
            <div class="road_pop_spin"></div>
            <div class="road_pop_spin"></div>
        </div>
        <div class="road_pop_txt_wrap">
            <strong class="road_pop_tit">데이터 처리 중...</strong>
            <p class="road_pop_sub_tit">잠시만 기다려주시기 바랍니다.</p>
        </div>
    </div>
</div>
<!-- // e: road layer pop -->

// test root
#root{
    position: relative;
}



// road layer pop
.road_pop_container{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    .road_pop_wrap{
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        .road_pop_spin_wrap{
            position: relative;
            width: 120px;
            height: 120px;
            margin: 0 auto;
            .road_pop_spin{
                transform-origin: 60px 60px;
                animation: popSpin 0.8s linear infinite;
                &:after{
                    content: " ";
                    display: block;
                    position: absolute;
                    top: 24px;
                    left: 24px;
                    width: 14px;
                    height: 14px;
                    border-radius: 50%;
                    background:  #ff727d;
                }
                &:nth-child(1) {
                    transform: rotate(0deg);
                    animation-delay: -0.7s;
                }
                &:nth-child(2) {
                    transform: rotate(45deg);
                    animation-delay: -0.6s;
                }
                &:nth-child(3) {
                    transform: rotate(90deg);
                    animation-delay: -0.5s;
                }
                &:nth-child(4) {
                    transform: rotate(135deg);
                    animation-delay: -0.4s;
                }
                &:nth-child(5) {
                    transform: rotate(180deg);
                    animation-delay: -0.3s;
                }
                &:nth-child(6) {
                    transform: rotate(225deg);
                    animation-delay: -0.2s;
                }
                &:nth-child(7) {
                    transform: rotate(270deg);
                    animation-delay: -0.1s;
                }
                &:nth-child(8) {
                    transform: rotate(315deg);
                    animation-delay: 0s;
                }
            }
        }
        .road_pop_txt_wrap{
            margin-top: 16px;
            .road_pop_tit{
                font-size: 20px;
                font-weight: 700;
                color: #FFF;
                font-family: 'pretendard';
            }
            .road_pop_sub_tit{
                margin-top: 8px;
                font-size: 16px;
                color: #FFF;
                font-family: 'pretendard';
            }
        }
    }
}

// road layer pop spin animation
@keyframes popSpin {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@media screen and (max-width: 768px){
    .road_pop_container{
        .road_pop_wrap{
            .road_pop_spin_wrap{
                width: 66px;
                height: 66px;
                .road_pop_spin{
                    transform-origin: 33px 33px;
                    &:after{
                        top: 16px;
                        left: 16px;
                        width: 8px;
                        height: 8px;
                    }
                }
            }
            .road_pop_txt_wrap{
                margin-top: 6px;
                .road_pop_tit{
                    font-size: 16px;
                }
                .road_pop_sub_tit{
                    margin-top: 4px;
                    font-size: 12px;
                }
            }
        }
    }
}

 

*참고

https://loading.io/css/