现在流行的框架如element ui 、vant 等都有封装好的loading组件，直接拿来用。
微信小程序、uni-app等也有封装的loading组件，几个代码轻松引用。
不过作为基础，知道组件原理还是不错的
loading组件需要引用一张gif动图
<template> <div class="loading"> <img width="24" height="24" src="./loading.gif"> <p class="desc">{{title}}</p> </div> </template>
<script > export default { props: { title: { type: String, default: ‘加载中...‘ } } } </script>
<style scoped lang="stylus" >
.loading
width: 100%
text-align: center
.desc
line-height: 20px
font-size: $font-size-small
color: rgba(255, 255, 255, 0.5)
</style>
父组件中引用
<!-- 自定义封装加载状态组件 --> <div class="loading-container" v-show="!list.length"> <loading></loading> </div>
import Loading from ‘@/common/loading/loading‘
components: {
Loading
}
原文：https://www.cnblogs.com/marquess/p/12685821.html