데이터가 불러와지기 전에 뱅글뱅글 도는 단순한 스피너 대신, 콘텐츠의 실제 뼈대(Skeleton) 형태를 미리 보여주는 로딩 화면은 사용자 경험(UX)을 크게 향상시킵니다.
회색 배경 위에 대각선 방향의 linear-gradient를 깔고, background-position을 가로로 지속적으로 이동시키는 애니메이션을 주면, 빛이 훑고 스윽 지나가는 멋진 시머(Shimmer) 효과를 완성할 수 있습니다.
<div class="skeleton-container">
<div class="skeleton-avatar skeleton"></div>
<div class="skeleton-lines">
<div class="skeleton-line skeleton"></div>
<div class="skeleton-line skeleton short"></div>
</div>
</div>