Vue element-ui修改全局loading样式

let loadinginstace

loadinginstace = ElementUI.Loading.service({
fullscreen: true//是否全屏
        lock: true,//是否锁定全屏滚动
        text: '',//自定义文字
        spinner: 'null',//自定义图标,不填为默认的,填入不存在的找不到图标就不显示
        background: 'rgba(0, 0, 0, 0.3)',//自定义背景色
        customClass:"osloading",//自定义类名
})

引入样式

import './assets/css/test.css'

设置样式

.osloading .el-loading-spinner {//这里添加图片样式
    height: 100%;
    background: url('loading.gif') no-repeat;//引入你需要的图片
    background-size:80px 80px;
    background-position-x:48%;
}
.osloading .el-loading-spinner::after{这里写入需要的文字样式
content: 'loading...';
color: #eee;
position: relative;
top: 80px;
left: -30px;
font-size: 20px;
}

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值