ElementUI - 自定义全局 Loading 加载动图 spinner（不使用内置图标而是自定义动态图）

前言

ElementUI Loding 组件文档：https://element.eleme.cn/#/zh-CN/component/loading

默认的样式如下图所示，更改加载图标为动态的 GIF 图片。

改为自定义动图，但要注意 底部的提示文字不能再使用了。

实现

如下示例是使用的 服务方式 ，指令方式也是如此。

如下样式，便可覆盖样式达到效果，具体在什么地方使用请看最下面的 示例。

.el-loading-spinner .circular{
  width: 42px;
  height: 42px;
  animation: loading-rotate 2s linear infinite;
  display: none;
}
.el-loading-spinner{
  /* 图片替换为你自定义的即可 */
  background: url('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1226402911,632147354&fm=26&gp=0.jpg') no-repeat;
  background-size: 48px 48px;
  width: 100%;
  height: 100%;
  position: relative;
  top: 50%;
  left: 50%;
}

示例

请去掉 text / spinner 配置，传空字符串即可。

export default {

    name: 'Loding',
    
    created(){
        
        // 示例
        const loading = this.$loading({
          lock: true,
          text: '',
          spinner: '',
          background: '#FFFFFF'
        });

        // 两秒后关闭
        setTimeout(() => {
          loading.close();
        }, 2000);
    }
}

在本页面加入以下 CSS 即可完成覆盖，图片替换你的就可以，其他不用更改。

<style>
.el-loading-spinner .circular{
  width: 42px;
  height: 42px;
  animation: loading-rotate 2s linear infinite;
  display: none;
}
.el-loading-spinner{

  /* 图片替换为你自定义的即可 */
  background: url('') no-repeat;
  
  background-size: 48px 48px;
  width: 100%;
  height: 100%;
  position: relative;
  top: 50%;
  left: 50%;
}
</style>

这时候效果就出来了。