[Vue.js][Ch4][영화검색 사이트] Loader

영화 상세 정보 페이지에 로딩 애니메이션 추가

로딩 애니메이션을 원하는 방식으로 다양하게 쓸 수 있도록 컴포넌트화

 

1. Loader.vue 생성

<template>
  <!-- absolute, fixed가 true이면 absolute, fixed라는 클래스 추가 -->
  <div 
    :style="{ 
      width: `${size}rem`, 
      height:  `${size}rem`,
      zIndex: 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;
  left: 0;        /* 가운데 정렬 */
  bottom: 0;
  right: 0;
  &.absolute {
    position: absolute;
  }
  &.fixed {
    position: fixed;
  }
}
</style>

2. Movie.vue에 Loader 컴포넌트 추가

 <Loader  
     :size="3"
     :zIndex="9"
     fixed />   <!-- 정중앙에 로딩애니메이션 동작 -->

• fixed만 적으면 fixed=true를 의미한다.

출력