[CSS] 스켈레톤UI 적용하기 (체감 로딩시간)

스켈레톤 UI : skeleton

스플래시 스크린이나 트로버는 단순히 로딩 중임을 알려주기 때문에 사용자들은 언제쯤 로딩이 완료될지 아무런 추측을 할 수 없다. 반면, 스켈레톤 스크린은 완전히 로드된 페이지의 모습을 대략적으로 흉내내어 나타내기 때문에, 사용자에게 실제 로딩 진행 과정을 어렴풋이나마 보여주어 사용자의 체감 로딩시간을 줄일 수 있게 된다.

로딩할 각종 미디어 자원이 많은 유튜브, 페이스북 등에서 사용하고 있다.

 

스켈레톤 예시 *출처 나무위키*

* 참고

스켈레톤 스크린 - 나무위키

 

HTML

<section class="skeleton" v-else>
  <article></article>
  <div></div>
  <article></article>
  <div></div>
  <article></article>
  <div></div>
</section>

CSS

  /* skeleton */
  .skeleton {
    position: relative;
  }
  .skeleton div {
    position: relative;
    border-radius: 8px;
    background-color: #eaedf1;
  }
  /* 원하는 경우 이미지 추가 */
  .skeleton div::after {
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 56px;
    height: 56px;
  }
  .skeleton article {
    position: absolute;
    top: 0;
    width: 130px;
    height: 200%;
    left: -100px;
    transform: rotate(15deg);
    filter: blur(20px);
    -webkit-filter: blur(20px);
    background-color: rgba(255, 255, 255, 0.148);
    animation: skeletonAni 1.2s infinite;
    z-index: 1;
  }
  @keyframes skeletonMove {
    from {
      left: -100px;
    }
    to {
      left: calc(100% + 100px);
    }
  }