스피너: 회전하는 원

[ CSS 목차 보기 ]

홈페이지를 로딩할 때, 위와 같이 로딩 중이라는 것을 볼 수 있는데, 이것을 스피너(Spinner) 또는 로더(Loader)라고 부른다. 사실 CSS의 animation만 조금 알고 있으면, 구현 방법은 어렵지는 않다.

[1] 기본 원 그리기

예제 목표
먼저 회전 움직임을 설정하기 전에 기본 형태인 원을 HTML와 CSS로 그릴 것이다. CSS만으로 원을 그리는 것에 관한 내용은 [참고1. CSS만으로 원 그리기]에 자세히 다뤘으니, 참고하시면 될 것 같다.

HTML

1
2
3
<div id=“wrapper”>
    <div id=“spinner”></div>
</div>
cs

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
    #spinner {
        margin: 0 auto;
        width: 100px;
        height: 100px;
        border: 15px solid rgba(163, 151, 198, 0.2);
        border-top: 15px solid rgba(163, 151, 198, 1);
        border-radius: 50%;
    }
    /* 아래는 기본 래퍼 설정 */
    #wrapper {
        margin: 0 auto;
        padding: 30px;
        max-width: 1170px;
    }
</style>
Colored by Color Scripter
cs

RESULT

HTML
<div id=”wrapper”></div> <!– 예제 코드를 둘러싸는 기본 래퍼이다.^{[참고2. 래퍼 개념과 기본설정]} –>
<div id=”spinner”></div> <!– 원을 만들 요소이다. –>
#spinner의 CSS^{[참고3. ID 선택자 개념]}
margin: 0 auto; // 부모 요소 div#wrapper을 가운데 정렬을 한다.
width: 100px; height: 100px; // 크기 설정을 한다.
border: 15px solid rgba(163, 151, 198, 0.2); // 테두리선의 두께, 스타일, 색깔을 설정한다. 윗쪽 테두리보다 연한 색을 선택하기 위해 불투명도를 0.2로 설정하였다.
border-top: 15px solid rgba(163, 151, 198, 1); // 윗쪽 테두리선의 두께, 스타일, 색깔을 설정한다. 윗쪽 테두리선을 다른 테두리선보다 더 진하게 하기 위해서, 불투명도를 1로 하였다.
border-radius: 50%; // 원을 만들기 위해, 테두리선 곡률을 50%로 설정하였다.
#wrapper의 CSS
래퍼의 기본 속성들을 설정하였다. 이렇게 설정하는 이유가 궁금하다면 [참고2. 래퍼 개념과 기본설정]에 자세히 나와있으니, 해당 포스트를 참고하시면 될 것 같다.
구현 결과
원이 형성되었고, 윗쪽 테두리선만 색깔이 다르다. 이것을 회전시키면 스피너가 될 수 있다.

[2] 회전 시키기 (CSS animation)

예제 목표
CSS animation을 이용하여 위에서 그린 원을 회전시킨다.

HTML

1
2
3
<div id=“wrapper”>
    <div id=“spinner”></div>
</div>
cs

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    #spinner {
        animation: spin 2s linear infinite;
    }
    /* 아래는 위에서 설정한 기본 설정 */
    #spinner {
        margin: 0 auto;
        width: 100px;
        height: 100px;
        border: 15px solid rgba(163, 151, 198, 0.2);
        border-top: 15px solid rgba(163, 151, 198, 1);
        border-radius: 50%;
    }
    /* 아래는 기본 래퍼 설정 */
    #wrapper {
        margin: 0 auto;
        padding: 30px;
        max-width: 1170px;
    }
</style>
Colored by Color Scripter
cs

RESULT

애니메이션 동작 원리
애니메이션을 부여하기 위해서는 크게 2가지 파트로 나눠서 생각할 수 있다.
(1) @keyframes “이름” – 동작에 관한 부분만을 따로 기술한다. 여기서는 대상 요소가 프레임마다 어떻게 변하게 될지 설정을 한다. 하지만 현실적으로 수많은 프레임을 하나하나 그릴 수는 없기 때문에, 사용자가 특정 지점들만 기술해 주고, CSS가 그 지점들 사이의 변화를 자동으로 연결해 준다.
(2) 적용하고 싶은 요소의 CSS – animation 프로퍼티를 이용하여, 적용하고 싶은 keyframes의 이름과 적용방식(재생 시간, 변화 속도, 반복재생)을 설정해준다.
@keyframes spin의 CSS
“spin”은 사용자가 현재 키프레임에 임의로 부여한 이름이다. 어떤 이름을 사용하여도 상관없다.
0% {transform: rotate(0deg)}; // 시작 순간(0%)의 상태는 0도 회전을 시킨 상태를 지정한다. 즉, 아무 움직임도 일어나지 않은 상태와 같다.
100% {transform: rotate(360deg)}; // 마지막 순간(100%)의 상태는 360도 회전을 시킨 상태로 지정한다. 각도는 시계 회전 방향으로 증가한다.
#spinner의 CSS
animation: spin 2s linear infinite; // animation프로퍼티는 4가지 속성값을 갖는다. 키 프레임 이름 (spin), 키 프레임 재생 시간 (2s), 변화 속도의 함수 (linear), 그리고 반복재생 여부 (infinite)로 설정한다. 여기서는 spin의 움직임을 2초 선형 반복으로 설정했다.
구현 결과
기본 설정으로 그려진 원이 “회전 운동”을 “2초”마다 “일정한 속도”로 “반복 재생”을 하고 있다.