CSS 로딩UI 만들기 #3. 좌우 이동을 반복하는 막대기(bar)

CSS 로딩UI 만들기 #3. 좌우 이동을 반복하는 막대기(bar)

---

요즘 계속 로딩 UI만 만들고 있다. 재밌어서 그런건 아니고 뭔가 계속 포스팅을 하려다보니 콘텐츠를 짜내는 중(?) 인가보다. 앞서 만든 회전하는 원, 시간차를 두고 스케일 조절을 반복하는 원에 이어 세번째 로딩 UI 제작이다.

CSS 로딩UI 만들기 #2. 시간차를 두고 스케일 조절 반복하는 원(Circle)

CSS 로딩UI 만들기 #1. 회전하는 원(Circle)

흔히 볼 수 있는 로딩 UI인데 아이디어는 윈도우에서 avast 프로그램을 설치하다가 얻게 되었다. 

 

avast install 전 볼 수 있는 로딩 UI

언제나 처럼 먼저 화면을 구성해보자. 캡쳐 이미지를 봐도 알겠지만 구현이 어려워보이진 않는다. 박스 안에 박스를 넣고 안에 있는 박스를 좌우로 반복하여 이동시켜주기만 하면 된다. 

<!-- HTML -->
<div class="loading-box">
	<div class="out-box">
		<i class="in-box"></i>
	</div>
	<p>Loading...</p>
</div>

/* CSS */
.loading-box {position:fixed; left:50%; top:50%; z-index:100; transform:translate(-50%, -50%); padding:40px 20px 20px; width:200px; text-align:center; background:#fff; box-shadow:0 3px 0 rgba(0,0,0,.2);}
.loading-box .out-box {position:relative; width:100%; height:5px; background:#000; border-radius:3px;}
.loading-box .out-box .in-box {position:absolute; top:1px; left:0; width:80%; height:3px; background:#00a5e5; border-radius:3px;}
.loading-box p {font-size:18px;}

로딩 UI 만들기, 시작은 언제나 레이아웃 구성부터

구성이 완료됐으면 @keyframe속성을 이용하여 좌우로 움직일 애니메이션을 만든 뒤 안에 있는 박스에 animation속성을 추가한다. (무한 반복을 위하여 alternate-reverse, infinite 속성 값도 추가해준다.) left값은 디자인에 따라 다를 수 있으니 맞게 조절해주면 된다.

/* CSS */
.loading-box .out-box .in-box {animation:moveBox 1.5s ease-in-out infinite alternate-reverse;}
@keyframes moveBox {
	from {left:-77%;}
	to {left:97%;}
}

완성된 로딩 UI

최종 CSS코드는 아래와 같다.

/* CSS */
.loading-box {position:fixed; left:50%; top:50%; z-index:100; transform:translate(-50%, -50%); padding:40px 20px 20px; width:200px; text-align:center; background:#fff; box-shadow:0 3px 0 rgba(0,0,0,.2);}
.loading-box .out-box {position:relative; width:100%; height:5px; background:#000; border-radius:3px; overflow:hidden;}
.loading-box .out-box .in-box {animation:moveBox 1.5s ease-in-out infinite alternate-reverse; position:absolute; top:1px; left:-77%; width:80%; height:3px; background:#00a5e5; border-radius:3px;}
.loading-box p {font-size:18px;}
@keyframes moveBox {
	from {left:-77%;}
	to {left:97%;}
}

---

클론 시리즈나 로딩 UI만들기 시리즈를 연재하며 느끼는건데 사실 구현은 그렇게 복잡하지 않지만 아이디어가 중요한 것 같다. 그래서 쉴때 레퍼런스를 많이 찾아보는 것이 중요한 것 같다.

---

inputbox 포커스 효과 (유튜브 댓글 입력 폼) UI Clone

CSS(Animation)로 햄버거 메뉴 애니메이션 구현 (PULIP) UI Clone

역동적인 이미지 로드 (현대차 N Brand) UI Clone