Vue 프로젝트 스켈레톤(Skeleton) UI

 

예제 스켈레톤 UI

 

 

- 뼈대 UI

- 실제 데이터가 렌더링 되기 전, 보여질 화면의 윤곽을 먼저 나타냄

 

Vue 프로젝트 스켈레톤 UI

 

1. /src/routes/Movie.vue 수정

<template>
  <div class="container">
    <div class="skeletons">
      <div class="skeleton poster"></div>
      <div class="specs">
        <div class="skeleton title"></div>
        <div class="skeleton spec"></div>
        <div class="skeleton plot"></div>
        <div class="skeleton etc"></div>
        <div class="skeleton etc"></div>
        <div class="skeleton etc"></div>
      </div>
    </div>
  </div>
</template>

...
<style lang="scss" scoped>
@import "~/src/scss/main";

.container {
  padding-top: 40px;
}
.skeletons {
  display: flex;
  .poster {
    width: 500px;
    height: 500px * 3 / 2;
    margin-right: 70px;
  }
  .specs {

  }
  .skeleton {
    border-radius: 10px;
    background-color: $gray-200;
    &.title {
      width: 80%;
      height: 70px;
    }
    &.spec {
      width: 60%;
      height: 30px;
    }
    &.plot {
      width: 100%;
      height: 250px;
    }
    &.etc {
      width: 50%;
      height: 50px;
    }
  }
}
</style>

 

결과