css里用el,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');)当然是自行找一张啦

Document

}.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%);

}}