5. Vue.jsでローディング画面を用意する

たとえば、数秒レベルの長い時間がかかるような処理があって、その処理が終わって値が返ってくるまで画面上にローディングアニメーションを表示させておきたいなどのケースがありますね。
そのサンプルとして、外部サイトのAPIをたたいてAPIから値が返ってくるまでローディング状態にするコードをご紹介します。

html部はこのような記述になります。（APIのURLなどはダミーですので動きません、あしからず）

<div id="app">
<div v-cloak>
  <transition-group
      name="fade"
      mode="out-in"
  >
    <div v-show="loading" class="loader" key="loader">
      <div id="loading">
        <div class="loading">
          <div class="obj"></div>
          <div class="obj"></div>
          <div class="obj"></div>
          <div class="obj"></div>
          <div class="obj"></div>
          <div class="obj"></div>
          <div class="obj"></div>
          <div class="obj"></div>
        </div>
      </div>
    </div>
    <div v-show="!loading" key="notloader">
      <button v-on:click="send">送信する</button>
      <p>返ってきたデータ：{{ returndata }}</p>
    </div>
  </transition-group>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            loading: false,
            senddata: 'senddata',
            returndata: '',
        },
        methods: {
            send: function() {
                this.loading = true;
                axios.post('https://domain.com/api', {data: this.senddata})
                .then(response => {
                    this.loading = false;
                    this.returndata = response.data['data']
                })
            },
        }
    });

</script>

　
次にCSS。

/* ローディング画面 */
.loader {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1080;
}
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background: rgba(0,0,0,1.0);
  position: absolute;
  left: 0;
  top: 0;
}
.loading{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 40px;
    display: flex;
    align-items: center;
}
.obj{
    width: 5px;
    height: 40px;
    background: white;
    margin: 0 3px;
    border-radius: 10px;
    animation: loading 0.8s infinite;
}
.obj:nth-child(2){
    animation-delay: 0.1s;
}
.obj:nth-child(3){
    animation-delay: 0.2s;
}
.obj:nth-child(4){
    animation-delay: 0.3s;
}
.obj:nth-child(5){
    animation-delay: 0.4s;
}
.obj:nth-child(6){
    animation-delay: 0.5s;
}
.obj:nth-child(7){
    animation-delay: 0.6s;
}
.obj:nth-child(8){
    animation-delay: 0.7s;
}
@keyframes loading{
    0%{
        height: 0;
    }
    50%{
        height: 40px;
    }
    100%{
        height: 0;
    }
}

以上です。
　
これで、APIから反応が返ってくるまで下のようなローディングアニメーションが表示されるようになります。
お試しあれ。