el-loading：

https://www.cnblogs.com/grt322/p/8564434.html

Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令v-loading，只需要绑定Boolean即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加body修饰符，可以使遮罩插入至 DOM 中的 body 上。

 自定义指令v-loading：

服务

Loading 还可以以服务的方式调用。引入 Loading 服务：

import { Loading } from 'element-ui';
在需要调用时：
Loading.service(options);

 其中 options 参数为 Loading 的配置项，具体见下表。LoadingService 会返回一个 Loading 实例，可通过调用该实例的 close 方法来关闭它：

let loadingInstance = Loading.service(options);
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
  loadingInstance.close();
});

需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：

项目使用：
1、 推荐
// 下载导入模板(只要安装了element即可) import { Loading } from 'element-ui';
    downloadTemplate() {
      let loadingInstance = this.$loading({
        lock: true,
        background: "rgba(0, 0, 0, 0.7)",
        text: "正在准备数据，请不要刷新或关闭页面",
      });
      this.$http({
        url: this.$http.adornUrl(
          "/gatherComm/xxxx/downloadTemplate"
        ),
        method: "post",
        responseType: "arraybuffer",
        data: this.$http.adornData({
          yearMonth: this.dataForm.yearMonth,
          cityId: this.dataForm.cityId,
        }),
      }).then((data) => {
        this.$http.fileDownload(data);
        loadingInstance.close();//关闭loading
      });
    },

import { Loading } from 'element-ui';
const loading = this.$loading({
      lock: true, //同v-loading的修饰符
      text: this.$t('加载中'), //加载文案
      background: 'rgba(10,29,69,0.8)', //背景色
      spinner: 'el-icon-loading', //加载图标
      target: document.querySelector(".body") //loading需要覆盖的DOM节点，默认为body
})

代码执行后，关闭loading

loading.close();

使用步骤：
1、完整引入了 Element
import ElementUI from 'element-ui' // pc端组件
2、在向后台发起请求前调用this.loading()，在请求结束后调用this.loading()，在请求结束后调用this.loading()，在请求结束后调用this.loading().close()

this.$axios.get().then(
  res=>{
	doSomthing
	this.loading.close()	
    this.loading = false;
})
  .catch(error=>{
   doSomthing
   this.loading.close()
   this.loading = false;
})

2、还需要先引入 Loading  麻烦！
import { Loading } from 'element-ui';
let loadingInstance = Loading.service({
          fullscreen: true,
          lock: true,
          background: "rgba(0, 0, 0, 0.7)",
          text: "正在准备数据，请不要刷新或关闭页面",
});

let loadingInstance1 = Loading.service({ fullscreen: true });
let loadingInstance2 = Loading.service({ fullscreen: true });

console.log(loadingInstance1 === loadingInstance2); // true

此时调用它们中任意一个的 close 方法都能关闭这个全屏 Loading。

如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 $loading，它的调用方式为：this.$loading(options)，同样会返回一个 Loading 实例。

Options

参数	说明	类型	可选值	默认值
target	Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点	object/string	—	document.body
body	同 v-loading 指令中的 body 修饰符	boolean	—	false
fullscreen	同 v-loading 指令中的 fullscreen 修饰符	boolean	—	true
lock	同 v-loading 指令中的 lock 修饰符	boolean	—	false
text	显示在加载图标下方的加载文案	string	—	—
spinner	自定义加载图标类名	string	—	—
background	遮罩背景色	string	—	—
customClass	Loading 的自定义类名	string	—	—

自定义

可自定义加载文案、图标和背景色。

在绑定了v-loading指令的元素上添加element-loading-text属性，其值会被渲染为加载文案，并显示在加载图标的下方。类似地，element-loading-spinner和element-loading-background属性分别用来设定图标类名和背景色值。

<el-table
    v-loading="true"
     :data="tableData"
     style="width: 100%">
</template>

<el-table
    v-loading="loading2"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    :data="tableData"
    style="width: 100%">

整页加载

页面数据加载时显示。

当使用指令方式时，全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用lock修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。

<el-button
    type="primary"
    @click="openFullScreen"
    v-loading.fullscreen.lock="fullscreenLoading">
    指令方式
  </el-button>

openFullScreen() {
        this.fullscreenLoading = true;
        setTimeout(() => {
          this.fullscreenLoading = false;
        }, 2000);
      },
      openFullScreen2() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 2000);
      }

转自：加载动画插件spin.js的使用随笔 - Dreamsqin - 博客园

很坑啊spin.js 报错，需要找到spin.min.js才有用

点击这里下载  spin.min.js  404 Not Found

<!doctype html>
<html>
    <head>
        <title>Test Spin Demo</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript" src="spin.min.js" ></script>
        <style>
            #Div{
                width: 100%;
                height: 100%;
                text-align:center;
            }
            
            #firstDiv{
                width: 100%;
                height: 50%;
            }
            
            #secondDiv{
                width: 50%;
                height: 50%;
                margin:0 auto;
            }
        </style>
        <script type="text/javascript">        
            //opts 样式可从网站在线制作
            var opts = {            
                lines: 13, // 花瓣数目
                length: 20, // 花瓣长度
                width: 10, // 花瓣宽度
                radius: 30, // 花瓣距中心半径
                corners: 1, // 花瓣圆滑度 (0-1)
                rotate: 0, // 花瓣旋转角度
                direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
                color: '#000', // 花瓣颜色
                speed: 1, // 花瓣旋转速度
                trail: 60, // 花瓣旋转时的拖影(百分比)
                shadow: false, // 花瓣是否显示阴影
                hwaccel: false, //spinner 是否启用硬件加速及高速旋转            
                className: 'spinner', // spinner css 样式名称
                zIndex: 2e9, // spinner的z轴 (默认是2000000000)
                top: '25%', // spinner 相对父容器Top定位 单位 px
                left: '50%'// spinner 相对父容器Left定位 单位 px
            };

            var spinner = new Spinner(opts);

            $(document).ready(function () {
                $("#btnRequest").bind("click", function () {
                    Request();
                });
                $("#btnRequest2").bind("click", function () {
                   Request2();
                });
            })
            
            function Request(){
                //请求时spinner出现
                var target = $("#firstDiv").get(0);
                spinner.spin(target);
            }
            
            function Request2(){
                //关闭spinner  
                spinner.spin();
            }
        </script>
    </head>
    <body>
        <div id="Div">
            <div id="firstDiv">
            </div>
            <div id="secondDiv">
                <input id="btnRequest" type="button" value="显示加载" class="btnStyle" />
                <input id="btnRequest2" type="button" value="隐藏加载" class="btnStyle" />
            </div>
        </div>
    </body>
</html>

提示：

Spin.js 的在线设计、演示及下载地址为：spin.js

我们可以在链接页面中，动态设置样式同时会自动生成样式的配置脚本：

var opts = {            
                lines: 13, // 花瓣数目
                length: 20, // 花瓣长度
                width: 10, // 花瓣宽度
                radius: 30, // 花瓣距中心半径
                corners: 1, // 花瓣圆滑度 (0-1)
                rotate: 0, // 花瓣旋转角度
                direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针
                color: '#000', // 花瓣颜色
                speed: 1, // 花瓣旋转速度
                trail: 60, // 花瓣旋转时的拖影(百分比)
                shadow: false, // 花瓣是否显示阴影
                hwaccel: false, //spinner 是否启用硬件加速及高速旋转            
                className: 'spinner', // spinner css 样式名称
                zIndex: 2e9, // spinner的z轴 (默认是2000000000)
                top: '25%', // spinner 相对父容器Top定位 单位 px
                left: '50%'// spinner 相对父容器Left定位 单位 px
            };

二、spin.js+自制遮罩（暂时还没有找到插件本身自带的遮罩层）

背景：想要在显示加载状态时，父层为不可编辑状态

在页面最后、</body>之前添加div遮罩层

<div id="mb"></div>

设置遮罩层的样式

#mb{
    display: none;
    height: 100%;
    width: 100%;
    position: fixed;
    *position: absolute;
    *height: 1380px;
    background: black;
    top:0;
    left: 0;
    opacity:0.6;
}

最后通过js控制遮罩的显示与隐藏

//显示
$("#mb").css("display","block");
var target = $(".firstDiv").get(0);
spinner.spin(target);

//隐藏
$("#mb").css("display","none");
spinner.spin();

效果如下，此时父层为不可编辑状态：