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>
这时候效果就出来了。
标签:el,loading,动图,自定义,100%,spinner,Loading,background 来源: https://blog.csdn.net/weixin_44198965/article/details/116306239