[jiho]Skeleton UI

[peanudge]

작업 내용

스켈레톤 UI 가 특별한 CSS 요소라고 하기보다는 컨텐츠가 보여지기 전에 미리 보여주기 위해서 가장 적절한 방법에 대한 고민인 것 같습니다.

활용한 스켈레톤 UI 관련된 CSS는 굉장히 짧습니다. 아래와 같이 skeleton class selector만 컨텐츠 요소들에 적용하면 쉽게 로딩 전 UI에 예상 컨텐츠 크기만큼 무언가 있다는 느낌을 줄 수 있습니다.

.skeleton {
  animation: skeleton-loading 1s linear infinite alternate;
}

.skeleton-text {
  height: 2rem;
  margin: 0.5rem;
  width: auto;
}

.skeleton-text.thick {
  height: 1rem;
}

@keyframes skeleton-loading {
  0% {
    background-color: hsl(200, 20%, 70%);
  }
  100% {
    background-color: hsl(200, 20%, 95%);
  }
}

생각보다 큰 수고없이 적용할 수 있을 것 같습니다. CSS 영역은 생각보다 간단히 해결할 수 있는 부분이 아닌가 싶습니다.

결과