안녕하세요~ 오늘은 로딩화면에서 빙글 빙글 돌아가는 로딩 스피너를 만들어 보려 합니다!
css를 활용하여 style을 주고, 애니메이션을 사용하여 가장 기본적인 스피너를 만들어 볼 계획입니다.
결과 화면을 먼저 확인해 볼까요?
위와 같이 원형 스피너 일부가 색상을 가지고 돌아가는 모양의 스피너 입니다. 그럼 요소부터
말들어 보겠습니다.
1. 사각형 요소 만들고 윗부분 색상 주기
<style>
.container {
width: 200px;
height: 200px;
margin: 20px auto;
border: 1px solid white;
background-color: #19CE60;
}
#spinner {
margin: calc(50% - 25px) auto;
width: 50px;
height: 50px;
box-sizing: border-box;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top-color: #white;
}
</style>
<body>
<div class="container">
<div id="spinner"></div>
</div>
</body>
위와 같이 container 영역 내부에 spinner 영역을 사각형으로 만들어 주고 크기와 색상을 지정해 줍니다.
여기서 사각형 테두리의 경우 전체 border 값은 rgba(255, 255, 255, 0.3) 값을 사용해 0.3만큼 투명하게 만들어주고 border-top-color 값만 white로 주어, 윗부분의 테두리 색상만 투명하지 않은 흰색으로 구분해 주었습니다. 아래와 같은 결과 화면을 확인할 수 있습니다.
2. spinner 영역 둥글게 변경
#spinner {
margin: calc(50% - 25px) auto;
width: 50px;
height: 50px;
box-sizing: border-box;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top-color: #white;
border-radius: 100%
}
사각형의 spinner 영역에 border-radius 값을 100%로 주어 영역을 동그랗게 바꿔 줍니다.
윗부분의 테두리 색상은 투명값이 없는 흰색이기 때문에 아래와 같이 원형의 1/4 은 테두리가 표시된 스피너 영역이 됩니다.
3. 회전 애니메이션 효과 주기
#spinner {
margin: calc(50% - 25px) auto;
width: 50px;
height: 50px;
border: 3px solid rgba(255, 255, 255, 0.3);
box-sizing: border-box;
border-top-color: white;
border-radius: 100%;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
100%
{
transform: rotate(360deg);
}
}
spin 이름의 애니메이션을 1초 동안 무한으로 반복하는 효과를 주었습니다.
@keyframes의 경우 100%일 경우 transform: rotate(360deg) 효과를 주어 360도 회전시켜 주었습니다.
결과 화면을 확인해 볼까요?
4. 아래 회전 영역 추가
#spinner {
margin: calc(50% - 25px) auto;
width: 50px;
height: 50px;
border: 3px solid rgba(255, 255, 255, 0.3);
box-sizing: border-box;
border-top-color: white;
border-bottom-color: white;
border-radius: 100%;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
100%
{
transform: rotate(180deg);
}
}
위와 같이 아래 테두리에 border-bottom-color: white 속성으로 흰색 영역을 추가하고, @keyframes에 transform: rotate() 내부 값을 180deg로 변경하여 아래 결과 화면처럼 활용할 수도 있습니다.
오늘은 로딩화면에서 빙글빙글 돌아가는 원형 스피너를 애니메이션 효과를 주어 만들어 보았습니다.
그럼 다음에 또다른 내용으로 찾아오겠습니다. 오늘은 이만~
'animation' 카테고리의 다른 글
| CSS 막대 로딩바 (크기가 변하는 막대 로딩바 만들기) (0) | 2023.01.12 |
|---|---|
| CSS 바운스볼 애니메이션 만들기 (bounce ball animation) (0) | 2023.01.09 |
| SVG 원형 프로그래스바 (svg circle progress bar) (0) | 2023.01.04 |
| CSS 도트 확대 로딩바 (css dot loading bar) (0) | 2022.12.20 |
| CSS 테두리 효과 애니메이션(css border animation) (0) | 2022.12.19 |
댓글