웹 페이지나 애플리케이션에서 로딩 중임을 사용자에게 알려주는 로딩 애니메이션은 중요한 UX 요소입니다. 로딩 애니메이션은 사용자가 기다리는 동안 무언가가 진행되고 있음을 시각적으로 보여줍니다. 이 글에서는 CSS만을 사용해 간단한 스피너(Spinner) 형태의 로딩 표시기를 만드는 방법을 소개하겠습니다.

1. 기본 HTML 구조

로딩 애니메이션을 구현하기 위해서는 간단한 HTML 구조가 필요합니다. 일반적으로 div 요소 하나만으로 스피너를 구현할 수 있습니다.

HTML 예시:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로딩 애니메이션 예제</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="spinner"></div>
</body>
</html>

설명:

  • spinner: 로딩 애니메이션을 나타내는 기본 요소입니다. 이 요소에 CSS를 적용해 스피너 애니메이션을 구현합니다.

2. 기본 스피너 스타일링

스피너 애니메이션을 구현하기 위해 CSS에서 @keyframes를 사용하여 회전 애니메이션을 설정합니다. 이 예시에서는 회전하는 원형 스피너를 만들겠습니다.

CSS 예시:

/* 스피너 스타일링 */
.spinner {
    width: 50px;
    height: 50px;
    border: 6px solid #f3f3f3; /* 회색 테두리 */
    border-top: 6px solid #3498db; /* 파란색 회전 부분 */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* 회전 애니메이션 설정 */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

설명:

  • 스피너 스타일링:
    • width와 height: 스피너의 크기를 설정합니다.
    • border: 스피너의 테두리를 설정합니다. border-top 속성을 사용해 파란색 회전 부분을 강조합니다.
    • border-radius: 50%: 원형으로 만들기 위해 테두리의 반지름을 50%로 설정합니다.
    • animation: spin 애니메이션을 1초 동안 반복적으로 실행하도록 설정합니다.
  • @keyframes spin:
    • transform: rotate(0deg);에서 transform: rotate(360deg);까지 회전 애니메이션을 정의합니다. 0도에서 360도까지의 회전을 1초에 걸쳐 반복합니다.

3. 다양한 스타일의 스피너 만들기

CSS 속성만 변경해도 다양한 스타일의 로딩 스피너를 만들 수 있습니다. 예를 들어, 여러 개의 점이 회전하는 스피너를 만들 수도 있습니다.

여러 점이 회전하는 스피너 예시:

<div class="spinner-dots">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

/* 여러 점이 회전하는 스피너 스타일링 */
.spinner-dots {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
}

.spinner-dots div {
    position: absolute;
    width: 13px;
    height: 13px;
    background-color: #3498db;
    border-radius: 50%;
    animation: spin-dots 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.spinner-dots div:nth-child(1) {
    top: 29px;
    left: 6px;
    animation-delay: -0.45s;
}

.spinner-dots div:nth-child(2) {
    top: 6px;
    left: 29px;
    animation-delay: -0.3s;
}

.spinner-dots div:nth-child(3) {
    top: 29px;
    left: 52px;
    animation-delay: -0.15s;
}

.spinner-dots div:nth-child(4) {
    top: 52px;
    left: 29px;
    animation-delay: 0s;
}

/* 점들이 회전하는 애니메이션 설정 */
@keyframes spin-dots {
    0% {
        transform: scale(1);
    }
    50%,
    100% {
        transform: scale(0.5);
    }
}

설명:

  • spinner-dots: 네 개의 점들이 위치할 부모 요소입니다.
  • div 요소들: 각각의 점으로, 애니메이션을 적용해 회전하는 효과를 줍니다.
  • @keyframes spin-dots: 점들이 커졌다 작아지면서 회전하는 효과를 줍니다.

4. 반응형 스피너

화면 크기에 따라 스피너의 크기가 조정되도록 반응형 스피너를 만들 수 있습니다.

반응형 스피너 예시:

/* 반응형 스피너 스타일링 */
.spinner-responsive {
    width: 10vmin; /* 화면 크기에 비례한 크기 설정 */
    height: 10vmin;
    border: 1vmin solid #f3f3f3;
    border-top: 1vmin solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

설명:

  • vmin: 뷰포트의 최소 크기에 비례하여 스피너 크기와 테두리 두께를 설정합니다. 이로 인해 화면 크기에 따라 스피너가 자동으로 조정됩니다.

결론

CSS만으로 간단한 로딩 애니메이션을 구현하는 것은 웹 개발에서 매우 유용한 기술입니다. 스피너와 같은 로딩 표시기를 사용하면 사용자에게 현재 페이지가 로드 중임을 명확히 전달할 수 있습니다. 다양한 스타일과 애니메이션을 조합하여 프로젝트에 맞는 로딩 애니메이션을 만들어보세요. 이를 통해 사용자 경험을 향상시키고, 웹 페이지의 품질을 높일 수 있습니다.

'CSS' 카테고리의 다른 글

CSS와 웹 접근성 - 접근성을 고려한 CSS 디자인 기법  (0) 2024.08.10
CSS로 만드는 툴팁 디자인 - 툴팁의 위치 지정과 애니메이션 적용  (0) 2024.08.10
CSS 명명 규칙: BEM 방법론 소개 - 유지보수에 유리한 클래스명 짓기  (0) 2024.08.10
CSS로 배너 광고 디자인하기 - 배너 광고를 위한 간단한 레이아웃  (0) 2024.08.10
CSS로 폼(Form) 요소 스타일링 - 입력란, 버튼, 체크박스 등을 꾸미는 방법  (0) 2024.08.10

+ Recent posts

티스토리툴바