CSS로 로딩 스피너를 만들어보자

프로젝트를 진행하면서, 메인 페이지에 이미지가 들어있는 데이터를 불러오다보니 로딩 스피너가 필요하다는 생각이 들었다. 개인적으로 그런 로딩화면을 만들어보고 싶기도 해서 바로 구글링에 들어갔다.

찾아보니까 로딩 스피너 라이브러리도 당연히(?) 있었는데, 나는 라이브러리를 가져다 쓰기 보다는 CSS로만으로도 간단한 로딩 스피너는 금방 만들 수 있을거라고 생각해서 CSS로만 로딩스피너를 만들었다.

import styled, { keyframes } from 'styled-components';

const rotation = keyframes`
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
`;

const Spinner = styled.div`
  height: 5rem;
  width: 5rem;
  border: 1px solid #3563e9;
  border-radius: 50%;
  border-top: none;
  border-right: none;
  margin: 10rem auto;
  animation: ${rotation} 1s linear infinite;
`;

export default Spinner;

뭔가 특별한 방법이 들어간건 아니고 그냥 border가 왼쪽과 밑에만 있는 원이 계속 빙글빙글 도는 형태이다. 구글링 해보면 더 간지..나는 스피너들도 많았는데 당장은 이 정도만 해도 충분히 깔끔하고 괜찮은거 같다. 프로젝트 구현이 어느 정도 끝나고 나서는 조금 수정하는 것도 좋을거 같다.

+ 구현을 하기 전에 프론트엔드 담당 코치님에게 로딩 스피너에 대한 질문을 했었는데, 메인 페이지에는 오히려 아무런 로딩 화면이 없는게 사용자 입장에서 이 사이트가 느려보이지 않을 수 있다는 의견을 주셨다. 또한, 이미지가 많아서 로딩이 느려질거 같으면 이미지를 좀 빼서라도 메인 페이지를 단순화하는게 나을 수도 있다고도 하셨다.

당장은 메인 페이지에 이미지가 그렇게 많은 편도 아니고, 로딩 속도도 굉장히 빨라서 사용자가 빈 화면을 보고 있는 시간이 0.5초도 되지 않는다. 그래서 로딩 스피너가 굳이 필요 없을 것 같아 제외했고 검색 결과창에는 그래도 활용을 해보고 싶어서 다음과 같이 구현해봤다. 이전에 스피너가 없을 때는 검색 결과만 갑자기 툭 나타나는 것 같아 부자연스럽다는 생각이 들었는데 스피너가 있으니까 꽤 괜찮은거 같다.