css만으로 로딩(스피너) 애니매이션 만들기 : css animation

사이트에 접속 시 화면이 나오기 전에 아이콘이 뱅글뱅들 돌고 있는 화면을 종종 볼 수 있습니다.

이것을 로더/로딩(loader/loading) 또는 스피너(spinner)라고 합니다.

로딩화면은 페이지를 불러들일 때 자연스러운 화면 전환을 위해 사용합니다. 

그리고 데이터를 불러들이는 중임을 나타내는 표시로 사용자로 하여금 '뭔가 진행은 되고 있구나'라는 상황을 인지하도록 해줍니다. 

하지만 너무 잦은 로딩이 표시되면 오히려 사이트가 느리다는 인상을 줄 수 있습니다. 적절히 사용하는 것이 좋겠습니다.

 

css만을 이용한 로딩을 구현이 가능한데, 어떻게 하는지 알아보도록 하겠습니다.

 

 @keyframes 애니메이션 이름  :  @keyframes는 애니메이션의 시작부터 종료까지 시간의 순서대로 동작을 지정할 수 있습니다.

@keyframes 애니메이션 이름 {
    0% {    //시작시점이며 form이라고 작성할수 있음.
        css스타일;    
    }
    50% {    //중간지점이며 
        css스타일; 
    }
    100% {    //완료시점이며 to라고 작성할수 있음.
        css스타일; 
    }
}


/* animation css */

animation: span .8s infinite linear;

// span : 키프레임 함수명(이름)
// .8s : 키 프레임 재생시간
// infinite : 반복 재생 여부
// linear : 변화 속도 함수

 

예시 css loder입니다.

우선 .loader 클래스를 만들어 화명 중아에 위치하도록 flex를 이용하여 정렬을 해주고

가상클래스 (:before)을 사용하여 이미지를 배경화면에 넣어주었습니다.

keyframes를 이용하여 360도 회전시켜줍니다. 

See the Pen Untitled by woosohee (@venusy) on CodePen.