내가 보려고 만든 개발 공부 일지

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

CSS

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

kwangsunny 2022. 1. 13. 15:37
반응형

화면에 컨텐츠를 보여주기 위해선 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로 구현해 보았다.

 

반응형
0 Comments
댓글쓰기 폼