무언가 액션을 할 때 로딩을 보여주는건 사용자 관점에서 있는게 직관적이고 좋다.
CSS 애니메이션 프로퍼티를 사용하여 로딩 스피너를 만들 수 있다.
<body>
<div></div>
</body>@keyframes loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
div {
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
animation: loading 2s infinite;
background-image: conic-gradient(#00f 0%, #00f 80%, #fff 80%, #fff 100%);
}
div::after {
content: "";
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #fff;
}