vue 에서 로딩화면

로딩 화면을 자주 구현하게 되어 포스팅을 남기도록 하겠습니다.

구현 자체는 간단한데, 부모 warp 하위에 자식으로 로딩 <div> 를 아래와 같이 만들어 주면 됩니다.

아래 코드는 loading == 0 인 경우 로딩이 되는데, 이렇게 한 이유는 api 를 하나만 호출하는 것이 아니라 여러개를 호출하다보니, 이렇게 하였는데, 보통은 boolean 자료형을 사용합니다.

<div class="wrap login-page">
  <div class="absolute inset-0 flex items-center justify-center bg-white bg-opacity-75 z-30" v-if="loading != 0">
    <font-awesome-icon :icon="['fas', 'circle-notch']" spin />
  </div>
  ...
</div>