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" ?> ...
随机推荐
- WCF尝试创建与发布IIS(含问题描述)
技术贴技术贴就直接讲技术来,客套的话我也不多说了,各位看官包涵包涵. 跟着园内高手一步一步发布成功,欣喜若狂之际,发个贴纪念纪念一下. 废话不多说,不正确之处,还望大家积极指出,共同进步.哈哈~~~ ...
- 在ZYBO板卡上实现PL-PS交互（通过AXI的方式）
前情提要:参考的是下面所说的原网页,只是原作者用的是vivado 2014.4,我用vivado 2018.2跑的,图是新的,内容大多“换汤不换药”,但是我在做的时候存在一些问题,我记录了下来并将解决 ...
- [Machine Learning] Linear regression
1. Variable definitions m : training examples' count \(y\) : \(X\) : design matrix. each row of \(X\ ...
- package.json详解
1.概念 Node.js项目遵循模块化的架构,当我们创建了一个Node.js项目,意味着创建了一个模块,这个模块的描述文件,被称为package.json 亦即:模块的描述文件 = package.j ...
- php实现商城秒杀
这一次总结和分享用Redis实现分布式锁来完成电商的秒杀功能.先扯点个人观点,之前我看了一篇博文说博客园的文章大部分都是分享代码,博文里强调说分享思路比分享代码更重要(貌似大概是这个意思,若有误请谅解 ...
- pycharm 2019/10 激活码 最新福利 （1）
MTW881U3Z5-eyJsaWNlbnNlSWQiOiJNVFc4ODFVM1o1IiwibGljZW5zZWVOYW1lIjoiTnNzIEltIiwiYXNzaWduZWVOYW1lIjoiI ...
- 分库分表(5) ---SpringBoot + ShardingSphere 实现分库分表
分库分表(5)--- ShardingSphere实现分库分表 有关分库分表前面写了四篇博客: 1.分库分表(1) --- 理论 2.分库分表(2) --- ShardingSphere(理论) 3. ...
- python编程基础之二十二
字典:字典属于可变对象,但是不属于序列,内部是通过哈希方式存储的,内部保存的是一个个键值对key:value 字典的键是唯一的, 字典查找速度比较快 d1 = {} #括号里面用键值对表示 d2 = ...
- 戈多编程-小谈sql语句的优化分析
在sqlserver大数据查询中,避免不了查询效率减慢,暂且抛弃硬件原因和版本原因,仅从sql语句角度分析. 一. sql 语句性能不达标,主要原因有一下几点: 1. 未建索引,检索导致全表扫描 2. ...
- asp.net 重写OnException返回json或跳转新页面
protected override void OnException(ExceptionContext filterContext) { // 此处进行异常记录,可以记录到数据库或文本,也可以使用其 ...