CSS 스켈레톤 로딩 💀

스켈레톤 로딩은 사용자 경험을 개선하기 위한 전략/기술입니다. 이 게시물에서는 UI 라이브러리나 멋진 구성 요소 없이 접근하는 방법의 예를 공유하고 싶습니다.

기본적으로 스켈레톤 로딩은 백엔드 또는 API에서 가져오는 구성 요소 또는 콘텐츠 영역을 목표로 합니다. 전체 페이지 또는 개별 구성 요소에 대해 로더를 사용할 수 있지만 이 접근 방식은 때때로 불안정한 사용자 경험을 초래합니다. 그러나 스켈레톤 로딩을 적용할 때 페이지의 기본 구조와 구성 요소가 표시되는지 확인합니다. 콘텐츠가 준비되면 스켈레톤 로더를 제거하고 콘텐츠를 표시할 수 있습니다.

다음은 codepen.io의 스켈레톤 로딩 예입니다.

https://codepen.io/yossi_abramov/pen/jOqxOQp

빠른 고장

이 예에서는 아바타, 이름, 이메일 및 연락처 버튼이 포함된 사용자 카드 구성 요소를 만들었습니다. 사용자 카드 내용은 단순성을 위해 하드 코딩됩니다. 실제 앱이나 웹사이트에서는 아마도 데이터를 가져와서 업데이트DOM할 것입니다.

<div class="user-card skeleton">
    <div class="user-cover">
      <img class="user-avatar" src="
        https://yossiabramov.com/images/avatar.jpeg" alt="user profile image" />
    </div>
    <div class="user-details">
      <div class="user-name hide-text">Yossi Abramov</div>
      <div class="user-email hide-text">[email protected]</div>
    </div>
    <button class="contact-user hide-text">CONTACT</button>
</div>

.user-card 요소에는 .skeleton 클래스가 있고 텍스트를 포함하는 모든 요소에는 .hide-text 클래스가 있습니다.

이제 이 예제는 CSS가 다소 무거우므로 가장 중요한 라인을 살펴보겠습니다.

/* Skeleton */

/* Static Skeleton */

.user-card.skeleton .user-cover {
  background: #e2e2e2;
}

.user-card.skeleton .user-cover .user-avatar {
  display: none;
}

.user-card.skeleton .user-cover::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -25px;
  border: 1px solid #fff;
  z-index: 10;
  background: #e2e2e2;
}

/* Animated Skeleton */

.user-card.skeleton .hide-text {
  background: #e2e2e2;
  color: transparent;
  position: relative;
  overflow: hidden;
}

.user-card.skeleton .hide-text::before {
  content: "";
  position: absolute;
  left: 0%;
  top: 0;
  height: 100%;
  width: 50px;
  background: linear-gradient(to right, #e2e2e2 25%, #d5d5d5 50%, #e2e2e2 100%);
  animation-name: gradient-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  filter: blur(5px);
}

@keyframes gradient-animation {
  from {
    left: 0%;
  }
  to {
    left: 100%;
  }
}

기본적으로 스켈레톤 로딩에는 정적 및 애니메이션의 두 가지 상태가 있습니다. .user-cover 및 .user-avatar 요소에는 CSS 전환이나 키프레임 애니메이션이 적용되지 않은 정적 골격이 있으며 .hide-text 클래스가 있는 모든 요소에는 키프레임 애니메이션이 있습니다. gradient-animation 애니메이션은 ::before 해당 absolute relative 아버지에 위치하는 .hide-text 요소에 적용됩니다. 애니메이션은 매우 간단하지만 효과적입니다.

이 예제의 JavaScript는 다소 느린 데이터 가져오기만 시뮬레이션합니다. 데이터를 가져오면 스켈레톤 로더를 제거할 수 있습니다.

const $el = document.querySelector(".user-card");

// Loading finished
setTimeout(() => {
  $el.classList.remove("skeleton");
  $el
    .querySelectorAll(".hide-text")
    .forEach((el) => el.classList.remove("hide-text"));
}, 3000);

스켈레톤 로딩에 대한 이 접근 방식이 간단하고 명확하기를 바랍니다 🙏 .

✍ 더 많은 게시물 보기:
https://yossiabramov.com/