Jae Front-end Study

스켈레톤 UI (skeleton UI)

스켈레톤 UI는 실제 데이터가 렌더링 되기 전에 보이는 화면의 윤곽을 표현한 로딩 애니메이션이다.

정적인 화면을 보여주는 대신 스켈레톤 애니메이션을 화면에 보여줌으로써 사용자의 요청이 진행 중임을 표시한다.

또한 정적인 화면보다 동적인 화면을 보여주었을 때 로딩 효과를 잘 표현할 수 있어 움직이는 그라데이션 효과를 자주 사용한다.

결과 화면

사진이어서 움직이지 않지만, keyframes과 animation을 사용해서 좌에서 우로 그라데이션 효과가 움직인다.

• HTML

<div class="gradient"></div>

• css/scss

색상과 크기는 본인이 원하는 스타일로 작성하면 된다.

keyframes 효과를 다르게 주면 여러 움직임으로 표현할 수 있다.

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.gradient {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  background-color: #555;
  border-radius: 16px;

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, rgba(#dfdfdf, 0) 0, rgba(#dfdfdf, 0.2) 20%, rgba(#dfdfdf, 0.5) 60%, rgba(#dfdfdf, 0));
    animation: shimmer 5s infinite;
    content: '';
  }
}