前言
雖說，el-loading 自帶的loading效果已經滿足日常的需求看
但是，美術大大覺得太low 我要我設計的，我不要你覺得我要我覺得
需求
自定義el-loading
正文
從官方需求文檔來看，是支持自定義的
1.需要文本的 直接用 element-loading-text
2.有自定義icon 的直接使用 element-loading-spinner
3.需要改一下背景顏色的 直接用 element-loading-background
好巧哦，我要的效果都不是這樣的
我沒有icon，我只有一張圖片
問題一 mask-image css屬性用於設置元素上遮罩層的圖像
我就是要純css實現loading
這是沒有任何樣式的圖片
實現后的效果（emmm 不會搞gif圖）
大概就是這樣子 填滿 然后反復這運動
貼心貼代碼（url('./icon.png');）當然是自行找一張啦
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { background: #ccc; } .mask{ width: 300px; height: 300px; background: linear-gradient(to bottom, #fff 50%, #00f 50%); -webkit-mask-image: url('./icon.png'); mask-image: url('./icon.png') ; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; animation: raise 1.2s ease-in-out infinite; } @keyframes raise{ 0%{ background: linear-gradient(to bottom, #fff 60%, #00f 60%); } 12.5%{ background: linear-gradient(to bottom, #fff 57.5%, #00f 57.5%); } 25%{ background: linear-gradient(to bottom, #fff 55%, #00f 55%); } 37.5%{ background: linear-gradient(to bottom, #fff 52.5%, #00f 52.5%); } 50%{ background: linear-gradient(to bottom, #fff 50%, #00f 50%); } 62.5%{ background: linear-gradient(to bottom, #fff 47.5%, #00f 47.5%); } 75%{ background: linear-gradient(to bottom, #fff 45%, #00f 45%); } 87.5%{ background: linear-gradient(to bottom, #fff 42.5%, #00f 42.5%); } 100%{ background: linear-gradient(to bottom, #fff 40%, #00f 40%); } } </style> </head> <body> <div class="mask"></div> </body> </html>
問題二 給element 全局的el-loading 加上自定義圖片loading
預備知識：如何全局替換element的css樣式呢
1.新建一個css文件，與main.js 同級
2.main.js 引入 import './element-variables.scss'
回歸主題，修改el-loading樣式
主要是這兩個class類名
.el-loading-spinner 以及 .el-loading-spinner .circular
直接上代碼
//loading 自定義
.el-loading-spinner .circular{
width: 42px;
height: 42px;
animation: loading-rotate 2s linear infinite;
display: none;
}
.el-loading-spinner{
width: 230px;
height: 230px;
background: linear-gradient(to bottom, #fff 100%, #00f 100%);
-webkit-mask-image: url('assets/img/loading.png');
mask-image: url('assets/img/loading.png');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
animation: raise 4s ease-in-out infinite;
top: 20%;
left: 50%;
position: relative;
}
@keyframes raise{
0%{
background: linear-gradient(to bottom, #fff 60%, #00f 60%);
}
12.5%{
background: linear-gradient(to bottom, #fff 57.5%, #00f 57.5%);
}
25%{
background: linear-gradient(to bottom, #fff 55%, #00f 55%);
}
37.5%{
background: linear-gradient(to bottom, #fff 52.5%, #00f 52.5%);
}
50%{
background: linear-gradient(to bottom, #fff 50%, #00f 50%);
}
62.5%{
background: linear-gradient(to bottom, #fff 47.5%, #00f 47.5%);
}
75%{
background: linear-gradient(to bottom, #fff 45%, #00f 45%);
}
87.5%{
background: linear-gradient(to bottom, #fff 42.5%, #00f 42.5%);
}
100%{
background: linear-gradient(to bottom, #fff 40%, #00f 40%);
}
}
Fannie式總結
特么的這個屬性，怎么用 都不生效。
要是知道怎么整的，評論區告知
