CSS - 애니메이션으로 로딩마크 만들기

화면에 컨텐츠를 보여주기 위해선 API를 호출하고 데이터를 가져와서 해당 UI에 적절히 렌더링 해줘야 한다.

이때 API 요청에 대한 응답이 올때까지 사용자에게 "요청중" 이라는 상태를 보여주는게 좋은 사용자 경험일 것이다.

 

이 상태를 로딩마크로 보여주는데 (원이 빙글빙글 돌아간다던가 아니면 텍스트가 움직인다던가) 

가장 무난한 모양의 로딩마크를 css로 구현하는 법을 끄적거려본다.

 

스타일-1  /  스타일-2

위 스타일1, 2 의 차이점은 1은 그냥 일정하게 회전만 하는 모습이고,

2는 뭔가 테두리가 늘어났다 줄었다 하면서 좀더 역동적으로 회전하는 모습이다.

 

 

스타일-1

/* style.scss */

.loading {
    div {
        border: 9px solid orange;
        border-radius: 50%;
        border-color: orange orange orange transparent;
        width: 80px;
        height: 80px;
        animation: spinning 1s linear infinite;
    }
}

@keyframes spinning {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

<div class='loading'>
	<div></div>
</div>

스타일-1 은 사실 너무 간단하다.

그저 div를 linear 하게 무한회전 하면 끝난다.

하나 짚고갈 점은 아래 두줄 코드인데

border-radius: 50%;
border-color: orange orange orange transparent;

border-color 는 인자값을 1개만 받을 수도 있지만, 4개까지 받을 수 있다.

인자를 4개 취했을땐 [ 위 - 오른 - 아래 - 왼 ] 순서로 테두리 색이 적용된다.

위 코드에선 orange 색으로 3면을 칠하고 왼쪽면만 투명하게 해줬다.

그리고 border-radius를 둥글게 줘서 마치 도넛의 한쪽을 베어먹은 모양이 되는것이다.

 

 

 

 

스타일-2

.loading {
    position: relative;
    div {
        position: absolute;
        border: 9px solid orange;
        border-radius: 50%;
        border-color: orange transparent transparent transparent;
        width: 80px;
        height: 80px;
        animation: spinning 1s infinite;

        &:nth-child(1){
            animation-delay: -0.3s;
        }
        &:nth-child(2){
            animation-delay: -0.2s;
        }
        &:nth-child(3){
            animation-delay: -0.1s;
        }
    }
}

@keyframes spinning {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

<div class='loading'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

스타일-2 는 1과 비교했을때 코드가 좀 더 추가되었다.

먼저 <div>가 4개가 되었고 position 값이 absolute 로 바뀌었다.

이렇게 되면 한입 베어문 도넛 4개가 한곳에 겹쳐진 모습이 될것이다.

 

이제 중요한건 마치 테두리가 늘었다 줄었다 하듯이 회전하는 모습을 구현하는 것인데

이를 구현하기 위해서 animation-delay 를 첫번째, 두번째, 세번째 div 에 다른 값을 주어 조금씩 다른 타이밍이에

애니메이션이 실행되도록 했다.

여기서 animation-delay 값을 음수로 줬다. animation-delay 값이 음수라는건 무엇을 의미할까 ?

 

만약 animation-duration : 5s 인 애니메이션이 있다고 해보자.

이는 애니메이션이 5초동안 실행된다는 뜻인데 animation-delay : -1s 이렇게 딜레이를 -1초로 주면

애니메이션을 1초 빨리 시작하겠다는 뜻이다. 즉 UI 가 화면에 그려졌을때 0초 부터 시작하는게 아니라

1초일때 모습부터 시작하겠다는 뜻이다. 

 

위에서 <div>에 animation-delay에 각각 다른 음수값을 준것은 UI 가 화면에 렌더링 되었을때 부터

"이미 돌아가고 있는 상태" 로 보이도록 만들고 싶어서다.

딜레이 시간을 만약 양수 값으로 줬다면, UI가 렌더링 됐을때 모습은 그제서야 딜레이만큼 하나씩 돌아가는 모습일 것이다. (이 부분은 직접 해보면 바로 알 수 있는 부분이다.)

 

 마지막으로 animation 에 linear 값을 뺐는데 그렇게되면 기본값인 ease 가 적용된다.

ease 는 일정한 속도가 아닌 속도가 서서히 줄어드는 효과를 주는 값이다.

 

 

4개의 div 에 각각 다른 색을 부여해서 어떻게 움직이는지 아래 모습을 보면 좀더 이해가 빠를 것이다.

딜레이에 따라 각각 다른 타이밍에 애니메이션이 적용되는 모습

 

 

 

 

이렇게 간단한 로드마크를 css로 구현해 보았다.