Vue 프로젝트 Loader

 

Vue 프로젝트 Loader

 

- 로딩 애니메이션을 하나의 컴포넌트로 만들 예정

 

1. /src/components/Loader.vue 생성

<template>
  <div
    :style="{
      width: `${size}rem`,
      height: `${size}rem`,
      zIndex
    }"
    :class="{ 
      absolute, 
      fixed
    }"
    class="spinner-border text-primary"></div>
</template>

<script>
export default {
  props: {
    size: {
      type: Number,
      default: 2
    },
    absolute: {
      type: Boolean,
      default: false
    },
    fixed: {
      type: Boolean,
      default: false
    },
    zIndex: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="scss" scoped>
.spinner-border {
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  &.absolute {
    position: absolute;
  }
  &.fixed {
    position: fixed;
  }
}
</style>

 

2. /src/components/MovieList.vue 수정

- <div v-if="loading" class="spinner-border text-primary"></div> 삭제

- Loader 컴포넌트로 대체

<template>
  <div class="container">
    <div
      :class="{ 'no-result': !movies.length }"
      class="inner">
      <Loader v-if="loading" />
... 생략

<script>
import MovieItem from '~/components/MovieItem'
import Loader from '~/components/Loader'

export default {
  components: {
    MovieItem,
    Loader
  },
...

 

3. /src/components/Movie.vue 수정

- 스켈레톤 UI에 로딩 애니메이션 추가

<template>
  <div class="container">
    <div class="skeletons">
      ...
    </div>
    <Loader
      :size="3"
      :z-index="9"
      fixed />
  </div>
</template>

<script>
import Loader from '~/components/Loader'

export default {
  components: {
    Loader
  },
  ...
}
</script>

...