본문 바로가기
HTML/CSS

[HTML/CSS]스켈레톤 UI: 로딩 애니메이션

by teamnova 2023. 10. 27.
728x90

이번 포스팅에서는 간단한 스켈레톤 UI를 구현하는 방법을 소개하고자 합니다.

스켈레톤 UI는 웹 페이지나 앱에서 콘텐츠가 로딩되는 동안 사용자에게 표시되는 임시 로딩 플레이스홀더입니다. 이는 사용자 경험을 향상시키기 위한 방법 중 하나로, 사용자에게 콘텐츠가 준비 중임을 알리면서 동시에 페이지의 레이아웃을 미리 보여줍니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 스타일 시작 -->
    <style>
      /* 스켈레톤 UI의 외부 컨테이너 스타일 */
      .skeleton-wrapper {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
      }

      /* 스켈레톤 UI의 기본 스타일 및 애니메이션 */
      .skeleton-header,
      .skeleton-line {
        background: linear-gradient(
          90deg,
          #f0f0f0 25%,
          #e0e0e0 50%,
          #f0f0f0 75%
        );
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
      }

      /* 스켈레톤 UI의 헤더 스타일 */
      .skeleton-header {
        width: 100%;
        height: 200px;
        border-radius: 10px;
        margin-bottom: 20px;
      }

      /* 스켈레톤 UI의 내용 스타일 */
      .skeleton-content .skeleton-line {
        height: 20px;
        margin-bottom: 10px;
        border-radius: 4px;
      }
      /* 마지막 스켈레톤 라인 스타일 */
      .skeleton-content .skeleton-line:last-child {
        width: 70%;
      }

      /* 스켈레톤 UI의 반짝임 애니메이션 */
      @keyframes shimmer {
        0% {
          background-position: -200% 0;
        }
        100% {
          background-position: 200% 0;
        }
      }
    </style>
    <!-- 스타일 종료 -->

    <title>스켈레톤 UI 예제</title>
  </head>
  <body>
    <!-- 스켈레톤 UI 시작 -->
    <div class="skeleton-wrapper">
      <div class="skeleton-header"></div>
      <div class="skeleton-content">
        <div class="skeleton-line"></div>
        <div class="skeleton-line"></div>
        <div class="skeleton-line"></div>
      </div>
    </div>
    <!-- 스켈레톤 UI 종료 -->

    <!-- 실제 콘텐츠 시작 -->
    <div class="actual-content" style="display: none">
      <img src="sample.jpg" alt="Sample Image" width="100%" />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
      </p>
      <p>
        Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies
        sed, dolor.
      </p>
      <p>
        Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper
        congue, euismod non, mi.
      </p>
    </div>
    <!-- 실제 콘텐츠 종료 -->

    <!-- 자바스크립트 시작 -->
    <script>
      window.onload = function () {
        setTimeout(function () {
          // 스켈레톤 UI 숨기기
          document.querySelector(".skeleton-wrapper").style.display = "none";
          // 실제 콘텐츠 표시
          document.querySelector(".actual-content").style.display = "block";
        }, 1000); // 1초 후 실행
      };
    </script>
    <!-- 자바스크립트 종료 -->
  </body>
</html>

위의 예제에서는 간단한 스켈레톤 UI 로딩 애니메이션을 구현하였습니다. 페이지가 로드되면 1초 동안 스켈레톤 UI를 표시하고, 이후 실제 콘텐츠로 전환됩니다. 스켈레톤 UI의 로딩 애니메이션은 사용자에게 콘텐츠가 곧 표시될 것임을 시각적으로 알려줍니다.