반응형
CSS 애니메이션을 사용해서 로딩 효과를 만들어보겠습니다.
구현
로딩효과를 추가할 요소를 아래와 같이 추가합니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- custom style -->
<link rel="stylesheet" href="main.css" />
<script defer src="index.js"></script>
</head>
<body>
<div class="loading"></div>
</body>
</html>해당 컴포넌트는 애니메이션의 딜레이 효과와 before 및 after Selector를 사용하고 시간차로 효과를 주어 하나의 요소만 사용하여 로딩효과를 완성하였습니다.
/* main.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.loading {
border: 30px solid transparent;
border-radius: 50%;
position: relative;
border-bottom-color: lightcoral;
animation: rotate 2s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
}
.loading::before {
content: '';
border-radius: 50%;
position: absolute;
top: -22.5px;
left: -22.5px;
border: 22.5px solid transparent;
border-bottom-color: lightskyblue;
animation: rotate 2s .5s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
}
.loading::after {
content: '';
border-radius: 50%;
position: absolute;
top: -15px;
left: -15px;
border: 15px solid transparent;
border-bottom-color: lightgreen;
animation: rotate 2s 1s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(90deg);
}
40% {
transform: rotate(180deg);
}
60% {
transform: rotate(270deg);
}
100% {
transform: rotate(360deg);
}
}이상으로 CSS 애니메이션을 사용하여 로딩효과를 만들어 보았습니다.
728x90
반응형
'프론트엔드 > CSS' 카테고리의 다른 글
| 기본 스타일 - 리셋 (0) | 2023.01.28 |
|---|---|
| 단위 (0) | 2023.01.03 |
| Inline VS Block and Inline-block (0) | 2022.12.30 |
| Absolute (0) | 2022.12.29 |
| Fixed (0) | 2022.12.29 |
