First: Write a loading component

<template>
  <div class="loading">
    <img width="20px" height="20px" src="./loading.gif">
    <p class="desc">{{title}}</p>
  </div>
</template>
Copy the code
An argument that receives a title in a script can pass in loaded information: <script>export default {
  props: {
    title: {
      type: String.default: 'Loading'
    }
  }
}
</script>
Copy the code

Inside a component: A box is given outside to control where Loading is displayed.

<div class="loading-container" v-show=! "" discList.length">
   <loading></loading>
</div>

.loading-container
      position absolute
      width 100%
      top 50%
      transform translateY(-50%)
Copy the code

It’s a small trick to use CSS3’s Transform translateY to move up 50% of its height.