标签：el loading 动图 自定义 100% spinner Loading background

前言

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>

这时候效果就出来了。

标签：el,loading,动图,自定义,100%,spinner,Loading,background
来源： https://blog.csdn.net/weixin_44198965/article/details/116306239

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。