[CSS + Javascript] 로딩 화면 이미지 360 회전 하고 로딩중에 문구도 바뀌도록 만들기

 
로딩 중 화면을 만드는데, 갑자기 애니메이션을 추가하고싶었다. (해도 됨)
 
이미지는 css animation이 있으니까 그걸로 하면되고, 
문구는 어떻게하지.. 하다가 문구는 Javascript로 했다.
 
현재 프로젝트가 프리마커 템플릿에 제이쿼리를 사용중이라 제이쿼리를 사용해서 추가해줬땅.
 
css는 하면 할수록 어려운데 재밌다.
 

@keyframes rotate-loading {
    100%{
        transform: rotate(360deg);
    }
}

.loading-popup-wrap .pop-img {
    animation: rotate-loading 3s linear infinite;
    transform-origin: 50% 50%;
}

 

---

 
리액트만 하다가 처음에 회사 추가개발때문에 제이쿼리 쳐다볼때는 아찔했는데,
스프링부트 만지다보니 백엔드 돌아가는것도 알게되고 제이쿼리도 은근 태그잡을땐 편한것같기도..

<div class="loading-popup-wrap">
    <div id="loadingPopupService" class="popup">
        <img src="../../img/outpatient/ic_loading.svg" alt="로딩이미지" class="pop-img"/>
        <h4 class="pop-title">처리중입니다<span id="loadingDots"></span></h4>
        <h6 class="pop-content">잠시만 기다려주세요.</h6>
    </div>
</div>

 

/**
 * 로딩창 닫기 이벤트를 수행하는 함수
 */
function updateLoadingText() {
    const loadingTextElement = $('#loadingDots');
    if (!loadingTextElement) return;

    const dots = ['.', '..', '...']; // 왔다갔다할 텍스트
    let index = 0;

    // 로딩창 닫을 때 clearInterval로 해제하려고 setInterval을 변수에 할당해둠
    loadingInterval = setInterval(() => {
        loadingTextElement.text(dots[index]);
        index = (index + 1) % dots.length;
    }, 500);
}

 
 

---

 

결과물스