element 自定义 el-loading
前言
虽说，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类名
//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式总结
特么的这个属性，怎么用 都不生效。
要是知道怎么整的，评论区告知
element 自定义 el-loading的更多相关文章
- 自定义el函数
1.1.1 自定义EL函数(EL调用Java的函数) 第一步:创建一个Java类.方法必须是静态方法. public static String sayHello(String name){ retu ...
- EL函数和自定义EL函数
简介 EL原本是JSTL1.0中的技术(所以EL和JSTL感情如此好就是自然的了),但是从JSP2.0开始,EL就分离出来纳入了JSP的标准了.但是EL函数还是和JSTL技术绑定在一起.下面将介绍如何 ...
- 【JSP】EL函数和自定义EL函数
简介 EL原本是JSTL1.0中的技术(所以EL和JSTL感情如此好就是自然的了),但是从JSP2.0开始,EL就分离出来纳入了JSP的标准了.但是EL函数还是和JSTL技术绑定在一起.下面将介绍如何 ...
- 自定义EL函数、自定义JSTL标签
自定义EL函数 1.做一个类(静态) package com.maya.el; public class ELBiaoDaoShi { public static String TiHuan(Stri ...
- [JSP]自定义EL函数以及使用
有时候在JSP页面需要进行一连串的字符串的处理,需要进行自定义EL函数. 先看EL函数的tld文件: standard.jar下面: 自定义EL函数: 1.编写EL函数(全是public static ...
- 自定义EL表达式，将对象转成json格式，关键代码
做javaweb开发的最常用的一个东西el表达式,这个东西是个很好用的东西,但有些时候我们处理复杂的字符串操作,就有些相形见绌了,这个时候就需要用自定义的方法去实现更多简洁方便的事情. 下面自定义一个 ...
- 10.自定义EL函数和自定义标签
需要在JSP页面中进行一些常见逻辑操作(如对字符串进行操作),首先考虑是否可以用到sun公司提供的EL函数库(fn.tld)和JSTL 核心标签库 如果sun公司的EL函数库没有或者无法满足,就需要自 ...
- EL表达式（三）自定义 EL 表达式
自定义EL函数(静态方法): 编写步骤: 1.编写一个Java类,提供一个静态方法 import java.util.List; public class GetLength { public sta ...
- 自定义EL表达式的函数
编写描述的tld文件放到web-inf/目录下,才能在jsp页面上调用 <?xml version="1.0" encoding="UTF-8" ?> ...
随机推荐
- 遇见Python
开发: 开发语言: 1.高级语言:Python Java.PHP C# Go ruby C++... ===> 字节码 2.低级语言:C.汇编 ...
- .net core 3.0 Signalr - 09 待改进&交流
## 个人心得 写博客真的比写代码累,膜拜那些坚持写博客的大佬! 有时候零散的片段比较多,没写之前感觉有千千万万要写的东西,实际写的时候发现, 好像这个没啥说的,然后就帖了个图,或者一笔带过了 ## ...
- python线程实现异步任务
了解异步编程 楼主在工作中遇到了以下问题,开发接口爬取数据代码完成之后要写入redis缓存,但是在写入缓存的过程花费2-3s,进行这样就大大影响了接口的性能,于是想到了使用异步存储. 传统的同步编程是 ...
- JS调用activeX实现浏览本地文件夹功能 wekit内核只需要<input type="file" id="files" name="files[]" webkitdirectory/>即可，IE内核比较麻烦
研究了一天,js访问本地文件本身是不可能的,只能借助于插件.植入正题,IE仅支持ActiveX插件. function openDialog() { try { var Message = " ...
- 自己动手实现智能家居之温湿度数据采集存储（DHT11，MySql）
[前言] 一个热爱技术的人一定向往有一个科技感十足的环境吧,那何不亲自实践一下属于技术人的座右铭:"技术改变世界". 就让我们一步步动手搭建一个属于自己的"智能家居平台& ...
- Timed out after 30000 ms while waiting to connect
今天使用mongo-java-drive写连接mongo的客户端,着实被上面那个错坑了一把.回顾一下解决过程: 报错: com.mongodb.MongoTimeoutException: Timed ...
- bootstrap-table 页脚总计(自定义统计总数)
•首先给table添加属性: showFooter: footer js代码如下: //初始化bootstrapTableinitBootstrapTable: function () { var o ...
- React入门学习
为了获得更好的阅读体验,请访问原地址:传送门 一.React 简介 React 是什么 React 是一个起源于 Facebook 的内部项目,因为当时 Facebook 对于市场上所有的 JavaS ...
- bugku 程序员本地网站
提示从本地访问,怎样让服务器认为你是从本地进行访问的: 使用burp抓包并在包中进行修改加入X-Forwarded-For: 127.0.0.1 X-Forwarded-For: 简称XFF头,它代表 ...
- PHP 插入排序 -- 直接插入排序
1)直接插入序 -- Straight Insertion Sort 时间复杂度 :O(n^2) 适用条件: 适合记录数不多的情况 1 <?php 2 $a = [0 =>3,4,5,1, ...