안녕하세요
이런 식으로 동글동글 돌아가는 UI가 필요한 경우가 많은데 오늘은 이걸 만들어보도록 하겠습니다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./main.css">
<script defer src="./main.js"></script>
</head>
<body>
<main>
<button class="btn">
<span class="loader"></span>
</button>
</main>
</body>
</html>
우선 이런 식으로 베이스 코드를 작성해주시고 같은 경로에 main.css / main.js를 만들어줍니다
사실 css만 있으면 되고 js는 딱히 필요한 건 아닙니다
여튼 처음 html을 생성하고 로드하면 위와 같은 화면이 뜹니다
여기서 loader는 inline 요소인 span태그로 만들어졌고 아무런 값도 가지고 있지 않습니다
일단 우선 button 태그를 가운데에 정렬해보죠
그리고 배경도 깔끔하게 베이지 색으로 적용해보겠습니다
body {
background-color: beige;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
main.css 에 위와 같은 값을 입력해줍니다
새로고침 후에는 버튼이 정 가운데에 위치하죠?
이제 버튼에 스타일을 줘서 이걸 좀 쉽게 볼 수 있게 만들겠습니다
( 원래는 클릭 이벤트로 구축해야 하는데 그냥 돌아가는 것만 만들어보죠 )
.btn {
width: 300px;
height: 70px;
background-color: black;
border-radius: 10px;
}
요런 css 를 추가해서 위에 검은 버튼을 만들어주세요
@keyframes spinner {
/* 키프레임 처리 */
/* from - to 혹은 0 - 100 (%)로 처리 가능 */
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
그리고 애니메이션 즉 돌아가는 걸 만들기 위해 애니메이션 코드를 작성해줍니다
.btn {
width: 300px;
height: 70px;
background-color: black;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.btn .loader {
width: 20px;
height: 20px;
/* 로딩 만들기 */
border-radius: 50%;
border: 4px solid white;
animation: spinner 1s infinite linear;
border-top-color: transparent;
}
마지막으로 .loader인 동글동글 돌아가는 걸 가운데로 정렬해주시면 끝입니다
그러면 이런 식으로 영구히 돌아가는 버튼이 하나 생깁니다
짠~