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

前言

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

默认的样式如下图所示,更改加载图标为动态的 GIF 图片。
ElementUI - 自定义全局 Loading 加载动图 spinner(不使用内置图标而是自定义动态图)
改为自定义动图,但要注意 底部的提示文字不能再使用了
ElementUI - 自定义全局 Loading 加载动图 spinner(不使用内置图标而是自定义动态图)

实现

使用 服务方式 ,不要使用指令方式。
ElementUI - 自定义全局 Loading 加载动图 spinner(不使用内置图标而是自定义动态图)

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

.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>

这时候效果就出来了。

上一篇:CSS太阳地球月亮转圈圈loading


下一篇:java虚拟机内存区域