저는 chakra-ui 를 활용해서 퍼블리싱을 하던 중, Spinner를 구현해야 했습니다.
차크라에서 제공하는 내장 Spinner UI를 활용하려 했지만 바로 요놈 때문에 막혔습니다.
이를 위해 Spinner를 커스텀해서 만들어야겠다고 생각했고,
생각보다 많은 시간을 투자해서 글로 남기고자 합니다.
커스텀에 필요한 요구사항은 다음과 같았습니다.
- gradient 한 배경 색상을 넣을 수 있다.
- 시작하는 부분이 둥글어야 한다.
하나하나 해결해가는 과정을 pure css,html을 통해 구현해보겠습니다.
Gradient한 배경색
처음에 생각한 방법은 border였지만, border를 둥글게, 그리고 gradient하게 배경색을 처리하는 것은 생각보다 까다로웠습니다.
이에 처리한 방식은 배경색을 칠하고, 가운데를 흰 색으로 처리하는 방법이었습니다.
gradient한 색상을 넣는 방식은 css의 내장 함수인 conic-gradient 를 활용하는 방식이었습니다.
배경색을 먼저 칠해본 코드와 화면은 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.spinner {
background: conic-gradient(white, #717680);
border-radius: 50%;
height: 32px;
width: 32px;
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>
색상은 우선 아무거나 넣었습니다.
이제 이걸 border 처럼 보이도록 하겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.spinner {
background: conic-gradient(white, #717680);
border-radius: 50%;
height: 32px;
width: 32px;
position: relative;
}
.spinner::after {
content: "";
position: absolute;
border-radius: 50%;
top: 8%;
right: 8%;
bottom: 8%;
left: 8%;
background-color: white;
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>
무언가 어색하지 않나요?
바로, 흰 부분이 시작되는 곳 때문입니다.
이 부분을 지우기 위해서는 conic-gradient의 시작 퍼센트를 조정해줍니다.
그리고 시작이 흰 색이 아니라, 색상부터 시작해서 흐릿해지는 방향이기 때문에 이 값도 다음과 같이 조정해주겠습니다.
.spinner {
background: conic-gradient(from 90deg, #717680, white 75%);
border-radius: 50%;
height: 32px;
width: 32px;
position: relative;
}90도부터 시작해서, 흰색은 75%까지만 채우라는 의미로 바꾸었습니다. 결과물은 다음과 같습니다.
이제 둥근 모서리를 채우는 일만 남았습니다!
시작하는 부분이 둥글어야 한다.
이 부분은 생각보다 간단합니다.
바로 after 혹은 before를 활용해서 같은 너비의 원 하나를 겹쳐놓으면 됩니다.
바로 이런 식으로요! 코드로 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.spinner {
background: conic-gradient(from 90deg, #717680, white 75%);
border-radius: 50%;
height: 100px;
width: 100px;
position: relative;
}
.spinner::after,
.spinner::before {
content: "";
position: absolute;
border-radius: 50%;
}
.spinner::after {
top: 8%;
right: 8%;
bottom: 8%;
left: 8%;
background-color: white;
}
.spinner::before {
width: 8%;
height: 8%;
right: 0;
top: 50%;
transform: translateY(-50%);
background-color: red;
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>
완성되었습니다!
이제 Spinner를 직접 구현하여 외부 라이브러리에 의존하지 않아도 되었습니다!
모두 행복한 개발생활하세요~!
