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

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

---

앞전에 CSS를 사용하여 회전하는 원 로딩 UI을 만든적이 있다.

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

이번에는 세개의 원을 나열해두고 각각 시간차를 두고 일정은 크기로 커졌다 작아졌다 하는 로딩 UI를 만들어보려고 한다. 이미지를 보지 않으면 설명이 어려우니 우선 결과물부터 보자.

 

시간차를 두고 스케일 조절을 반복하는 원들 (로딩UI)

먼저 화면 중앙에 레이어를 하나 띄어 그 박스 안에 원 3개, 그리고 Loading 텍스트를 넣어준다.

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

/* CSS */
.loading-box {position:fixed; left:50%; top:50%; z-index:100; transform:translate(-50%, -50%); padding:20px; width:200px; text-align:center; background:#fff; box-shadow:0 3px 0 rgba(0,0,0,.2);}
.loading-box .circles {padding-top:10px;}
.loading-box .circles i {display:inline-block; margin:0 3px; width:10px; height:10px; background:#00a5e5; border-radius:50em;}
.loading-box p {margin-top:10px; font-size:18px;}

로딩 UI 레이아웃 완성

위와 같이 레이아웃 작업을 마쳤다면 이제 각 원에 Scale Bounce효과를 넣어보자. Scale Bounce효과를 위해 @keyframes 속성을 추가하고 ".circles i"에 animation속성을 추가해준다. 애니메이션 시간은 적당한 시간을 넣어주고 애니메이션이 끝나면 다시 처음부터 시작이 아닌 뒤에서 앞으로 다시 앞에서 뒤로 무한반복 되야하니 alternate값과 infinite값을 추가해준다.

/* CSS */
.loading-box {position:fixed; left:50%; top:50%; z-index:100; transform:translate(-50%, -50%); padding:20px; width:200px; text-align:center; background:#fff; box-shadow:0 3px 0 rgba(0,0,0,.2);}
.loading-box .circles {padding-top:10px;}
.loading-box .circles i {animation:scaleBounce .3s alternate infinite; display:inline-block; margin:0 4px; width:10px; height:10px; background:#00a5e5; border-radius:50em;}
.loading-box p {margin-top:10px;}
@keyframes scaleBounce{
	from {transform:scale(.7)}
	to {transform:scale(1.3)}
}

scale bounce 애니메이션을 적용한 모습

이제 3개의 원에 각각 약간의 시간차를 주어 보자. ".circles i"의 animation속성에 animation-delay값을 추가해준다.

/* CSS */
.loading-box .circles i:nth-child(2) {animation-delay:.1s;}
.loading-box .circles i:nth-child(3) {animation-delay:.2s;}

완성된 로딩 UI

---

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

/* CSS */
.loading-box {position:fixed; left:50%; top:50%; z-index:100; transform:translate(-50%, -50%); padding:20px; width:200px; text-align:center; background:#fff; box-shadow:0 3px 0 rgba(0,0,0,.2);}
.loading-box .circles {padding-top:10px;}
.loading-box .circles i {animation:scaleBounce .3s alternate infinite; display:inline-block; margin:0 4px; width:10px; height:10px; background:#00a5e5; border-radius:50em;}
.loading-box .circles i:nth-child(2) {animation-delay:.1s;}
.loading-box .circles i:nth-child(3) {animation-delay:.2s;}
.loading-box p {margin-top:20px; font-size:18px;}
@keyframes scaleBounce{
	from {transform:scale(.7)}
	to {transform:scale(1.3)}
}

---

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

지도 이미지맵 온라인에서 쉽게 만들고 코드(좌표) 가져오기 (With.Image Map Generator)

jQuery 사용, 이제는 정말 그만해야 하는걸까? (2020년 2월)