728x90
<!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>회원가입 페이지</title>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loading">
</div>
<h3>Loading ...</h3>
</body>
</html>index.html 파일에 로딩 애니메이션을 보여주기 위한 div 요소를 추가한다.
.loading{
width: 200px; height: 200px;
border: 15px dotted orange;
border-radius: 50%;
border-top: 15px dotted white;
border-right: 17px dotted orange;
border-bottom: 20px dotted orange;
border-left: 30px dotted orange;
/* loading 의 부모요소 중에서 position 이 static 이 아닌 */
/* 요소의 위치를 기준으로 loading 의 위치가 결정됨 */
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
animation: spin 1500ms ease-out infinite;
}
h3{
margin: 0;
letter-spacing: 2px;
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
color: orange;
}
@keyframes spin{
from{
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%) rotate(0deg);
}
to{
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%) rotate(360deg);
}
}style.css 파일을 위와 같이 작성하자!
:root{
--primary-color: brown;
}
.loading{
width: 200px; height: 200px;
border: 15px dotted var(--primary-color);
border-radius: 50%;
border-top: 15px dotted white;
border-right: 17px dotted var(--primary-color);
border-bottom: 20px dotted var(--primary-color);
border-left: 25px dotted var(--primary-color);
animation: spin 1500ms ease-in infinite;
}
h3{
margin: 0;
letter-spacing: 2px;
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
color: var(--primary-color);
}
.center{
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
}
@keyframes spin{
from{
transform: translate(-50%, -50%) rotate(0deg);
}
to{
transform: translate(-50%, -50%) rotate(360deg);
}
}중복되는 코드를 조금더 다듬으면 위와 같다.
728x90
'프론트엔드 > CSS' 카테고리의 다른 글
| 자바스크립트 없이 탭메뉴 만들기 (0) | 2023.06.23 |
|---|---|
| 우주의 공전 궤도 그리기 (0) | 2022.07.15 |
| Flexbox 수업 - 요약 (0) | 2022.07.06 |
| flex 로 블로그 레이아웃 만들기 (0) | 2021.11.04 |
| flex 없이 탭 네비게이션 만들기 (0) | 2021.11.04 |