Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 코딩규칙
- 로딩UI
- 구글CSS
- javascript
- to do list
- 스타일가이드
- vuejs입문
- 자바스크립트
- 개발회고
- 투두리스트
- CSS애니메이션
- python
- google style guide
- CSS로딩
- Vue.js
- css rule
- 자기개발
- 코딩가이드
- vue-cli
- @keyframes
- vueJS
- 코딩컨밴션
- css규칙
- MariaDB
- 프레임워크
- 뉴스수집
- 구글스타일가이드
- html제거
- 파이썬
- 웹스크래핑
Archives
- Today
- Total
코드공부방
CSS 로딩UI 만들기 #2. 시간차를 두고 스케일 조절 반복하는 원(Circle) 본문
반응형
CSS 로딩UI 만들기 #2. 시간차를 두고 스케일 조절 반복하는 원(Circle)
앞전에 CSS를 사용하여 회전하는 원 로딩 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;}
위와 같이 레이아웃 작업을 마쳤다면 이제 각 원에 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)}
}
이제 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;}
최종 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)}
}
반응형
'웹퍼블리셔 > CSS' 카테고리의 다른 글
CSS 로딩UI 만들기 #3. 좌우 이동을 반복하는 막대기(bar) (0) | 2020.03.02 |
---|---|
(IE 포함) 페이지 프린트(print)할때 background 안나오는 현상 해결 (1) | 2020.02.18 |
CSS로 한줄, 여러줄 글 길어지면 말줄임("...") 표시하기 (0) | 2020.02.06 |
유튜브(Youtube) 영상 비율에 맞게 (반응형 사이즈)로 가져오기 (2) | 2020.02.05 |
CSS 로딩UI 만들기 #1. 회전하는 원(Circle) (1) | 2019.09.20 |
Comments