안녕하세요~ 오늘은 원형 도트가 서서히 확대되는 애니메이션의 로딩바를 만들어 보려고 합니다!
결화 화면 부터 먼저 확인해 보겠습니다.
위와 같은 원형의 도트가 차례로 하나씩 확대대는 로딩바입니다.
keyframes, transform 속성을 이용해 원형 애니메이션을 만들고, 시간차를 주어 효과를 적용해 보려 합니다. 우선 요소를 만들고 자리잡아 주겠습니다.
1. 내부 요소 만들기
[html]
<style>
.container {
width: 200px;
height: 200px;
margin: 20px auto;
border: 1px solid white;
background-color: #19CE60;
}
.area {
margin: calc(50% - 10px) auto;
width: 70px;
height: 20px;
text-align: center;
}
.area > div {
width: 18px;
height: 18px;
background-color: white;
border-radius: 100%;
display: inline-block;
}
</style>
<body>
<div class="container">
<div class="area">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
</div>
</div>
</body>
위와 같이 전체 초록색 배경의 영역인 container와 내부 도트가 위치할 영역인 area를 만들어 주고, 내부에
dot1, dot2, dot3 3개의 도트 요소를 만들어 줍니다.
도트 요소의 경우 border-radius 속성을 100%로 주어 원형으로 만들어 주었습니다.
.area 영역의 margin의 경우 전체 50%에서 영역 높이의 절반인 10px을 calc() 함수를 이용하여 빼주었습니다. 전체 영역의 가운데에 도트바 3개가 정렬되어 나타나게 됩니다.
요소를 생성한 화면을 확인해 보겠습니다.
위와 같이 영역 가운데 자리잡는 3개의 dot요소가 생성되었습니다. 그럼 이제 애니메이션 효과를 부여해 줍니다.
2. 애니메이션 효과 주기
[css]
.area > div {
animation: loading 1.5s infinite ease-in-out both;
}
@keyframes loading {
0% {
transform: scale(0);
} 50% {
transform: scale(1.0);
} 100% {
transform: scale(0);
}
}
도트 영역에 loading이름으로 1.5초의 시간동안 무한으로 반복하는 애니메이션 효과를 설정해 주었습니다.
@keyframes 내부에는 0%일때 transform: scale(0) 으로 도트 요소의 스케일을 0으로 줄였다가
50%일때 transform: scale(1.0) 으로 도트 요소의 스케일을 최대까지 키워 줍니다.
100%가 되었을때 다시 transform: scale(0) 으로 스케일을 0으로 줄여 줍니다.
도트 영역이 작은 영역에서 시작하여 최대로 커지고 다시 작아지는 애니메이션 효과를 무한으로 반복하게 됩니다. 결과를 확인해 보겠습니다.
위와 같이 3개의 도트 영역이 동시에 작아졌다 커졌다를 반복하며 나타나게 됩니다.
3. 애니메이션 딜레이 주기
[css]
.area .dot2 {
animation-delay: 0.1s;
}
.area .dot3 {
animation-delay: 0.2s;
}
두번째 도트요소과 3번째 도트 요소에 animation-delay 속성값을 0.1s, 0.2s로, 0.1초의 시간차를 두고
애니메이션이 재생되도록 지정해 주었습니다. 일정 시간 간격을 두고 도트 영역이 점차 확대되고 줄어들며 재생되는 로딩바 결과화면을 확인해 볼까요?
오늘은 로딩바 애니메이션을 만들어보았습니다.
다양한 로딩바가 많은데 다음에 새로운 로딩바 애니메이션도 만들어 볼 생각입니다.
오늘은 그럼 이만~
'animation' 카테고리의 다른 글
| CSS 막대 로딩바 (크기가 변하는 막대 로딩바 만들기) (0) | 2023.01.12 |
|---|---|
| CSS 바운스볼 애니메이션 만들기 (bounce ball animation) (0) | 2023.01.09 |
| SVG 원형 프로그래스바 (svg circle progress bar) (0) | 2023.01.04 |
| CSS 원형 로딩 스피너 (css circle loading spinners) (0) | 2022.12.22 |
| CSS 테두리 효과 애니메이션(css border animation) (0) | 2022.12.19 |
댓글