Html 로딩 애니메이션 - Html loding aenimeisyeon

이 TisTory(#1) 간단하게 로딩 창 구현하기 포스팅은 Tistory(#1) theme toggle 구현하기를 일부 공유합니다.

html

<!--loading--> <div id="loading"> <div id="loading-circle"> <div id="loading-empty"></div> </div> </div> <!--loading-->

html 코드는 크게 3개의 요소로 이루어집니다.

1. #loading → loading 화면 전체
2. #loading-circle → loading을 의미하는 원
3. #loading-empty → #loading-circle에서 원의 미완성 부분

loading.css

#loading { display: flex; justify-content: center; align-items: center; z-index: 32; position: fixed; top: 0; width: 100vw; height: 100vh; background-color: var(--background-color-body); animation: hideLoadingScreen 0.3s linear forwards; animation-delay: 0.7s; } @keyframes hideLoadingScreen { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } #loading-circle { position: relative; width: 2rem; height: 2rem; border: 0.3rem solid var(--color-a); border-radius: 50%; display: flex; justify-content: center; animation: loadingCircle 1s ease-in-out infinite; } @keyframes loadingCircle { from { transform: none; } to { transform: rotate(360deg); } } #loading-empty { position: absolute; background-color: var(--background-color-body); width: 1rem; height: 2rem; top: -1rem; }

#loading

#loading { display: flex; justify-content: center; align-items: center; z-index: 32; position: fixed; top: 0; width: 100vw; height: 100vh; background-color: var(--background-color-body); animation: hideLoadingScreen 0.3s linear forwards; animation-delay: 0.7s; }

#loading의 역활은 loading 전체화면입니다.

width, height

#loading { width: 100vw; height: 100vh; }

너비(width)와 높이(height)를 각각 100vw 100vh로 설정하여 화면 전체가 해당되게 합니다.

display

#loading { display: flex; justify-content: center; align-items: center; }

display를 flexible하게 만듭니다. 기본 축(justify-content)과 교차 축(align-items) center로 해 자식 요소가 화면의 정중앙에 오도록 합니다.

z-index

#loading { z-index: 32; }

z-index 속성을 32로 하여 현재 레이어 층이 32층이며 가장 최상위 층이라고 설정합니다. 최상위 층이라는 것은 곧 이 loading 창 위에 아무것도 없다는 것입니다.

position

#loading { position: fixed; top: 0; }

position을 fixed로 하여 요소를 일반적인 흐름에서 제거하고, 공간 또한 배정하지 않게 한 후 top: 0을 통해 전체 화면의 최상단에 위치하게 합니다.

animation

#loading { animation: hideLoadingScreen 0.3s linear forwards; animation-delay: 0.7s; }

hideLoadingScreen 애니메이션을 0.3초(animation-duration)동안 실행하고 애니메이션 진행 방식(animation-timing-function)을 linear 즉 선형성 직선적으로 바르게 진행하도록 합니다. 그리고 forwards 속성을 줌으로(animation-fill-mode) 애니메이션이 끝난 후에도 지속되게 합니다.

또한 애니메이션 지연(animation-delay)을 0.7초로 하여 애니메이션이 0.7초 뒤에 실행하도록 합니다.

hideLoadingScreen animation

@keyframes hideLoadingScreen { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }

@keyframes 규칙을 생성합니다. 애니메이션 이름(animation-name)을 hideLoadingScreen으로 정합니다. opacity를 통해 불투명 정도를 완전히 없음(1) 에서 완전히 있음(0) 으로 합니다. 하지만 불투명할 뿐이지 존재하므로 요소의 보임(visibility)을 hidden으로 숨김처리 하여 loading 창이 없는 효과를 줘 loading 창 밑 층에 있는 요소들을 제어 할 수 있게 합니다.

#loading-circle

#loading-circle { position: relative; width: 2rem; height: 2rem; border: 0.3rem solid var(--color-a); border-radius: 50%; display: flex; justify-content: center; animation: loadingCircle 1s ease-in-out infinite; }

#loading-circle 원에 관한 요소입니다.

position

#loading-circle { position: relative;

position을 relative로 설정하여 #loading-empty 의 기준이 되는 조상은 #loading-circle 인 것이라고 지정합니다.

width, height

#loading-circle { width: 2rem; height: 2rem; }

width와 height를 2rem으로 하여 px과 같은 절대적인 길이가 아닌 상대적인 길이 설정을 통해 웹과 모바일을 모두 호환이 가능하게끔 합니다.

border

#loading-circle { border: 0.3rem solid var(--color-a); border-radius: 50%; }

마찬가지로 border의 굵기 또한 상대적인 척도인 rem을 사용합니다. 색상은 dataTheme.css의 --color-a인 #8b949e와 #57606a를 사용합니다. 그리고 border-radius는 원이 되어야 하므로 50% 로 합니다.

display

#loading-circle { display: flex; justify-content: center; }

display는 flexible 속성을 주고 justify-content을 center로 설정해 자식 요소인 #loading-empty 가 중앙으로 오게 합니다.

animation

#loading-circle { animation: loadingCircle 1s ease-in-out infinite; }

loadingCircle 애니메이션을 1초(animation-duration)동안 실행하고 애니메이션 진행 방식(animation-timing-function)을 ease-in-out 즉 시작과 끝의 속도를 천천히 진행하도록 합니다. 그리고 infinite 속성을 줌으로(animation-fill-mode) 애니메이션이 끝나고도 계속 무한으로 반복되게 합니다.

loadingCircle animation

@keyframes loadingCircle { from { transform: none; } to { transform: rotate(360deg); } }

@keyframes 규칙을 생성합니다. 애니메이션 이름(animation-name)을 loadingCircle로 정합니다. transform을 none으로 설정하여 효과가 없는 상태에서 시작하여 rotate(360deg) 즉 360도로 시계방향으로 회전하게 합니다.

#loading-empty

#loading-empty { position: absolute; background-color: var(--background-color-body); width: 1rem; height: 2rem; top: -1rem; }

width, height

#loading-empty { width: 1rem; height: 2rem; }

너비(width)와 높이(height)를 1rem, 2rem으로 여유롭게 설정하여 원 상단의 일부분을 가리게 합니다.

position

#loading-empty { position: absolute; top: -1rem; }

position을 absolute로 설정하여 가장 가까운 위치의 조상인 #loading-circle을 기준으로부터 top: -1rem 즉 1rem만큼 상단으로 위치가 이동합니다.

background-color

#loading-empty { background-color: var(--background-color-body); }

background-color 즉 배경색은 themes.css의 --background-color-body인 #0d1117과 #57606a를 사용합니다.