theluyuan/layui-layer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

loading

Browse Source
This commit is contained in:
Theluyuan 2022-12-30 08:58:33 +08:00
parent 4b0c6aafd5
commit f91730caaa
5 changed files with 106 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/index.css
View File

File diff suppressed because one or more lines are too long

68
lib/layer-vue.es.js
View File

File diff suppressed because one or more lines are too long

6
lib/layer-vue.umd.js
View File

File diff suppressed because one or more lines are too long

5
src/component/index.vue
View File

@ -337,7 +337,7 @@ watch(
props.success();
}
},
{ immediate: true }
{ immediate: true, flush: "post" }
);
watch(
@ -631,6 +631,9 @@ defineExpose({ reset, open, close });
:style="{ height: contentHeight }"
:class="contentClasses"
>
<template v-if="type === 3">
<div style="scale: 0.5"><div class="loading"> </div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="6.3" result="blur" /> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 14 -4" result="goo" /> <feBlend in="SourceGraphic" in2="goo" /> </filter> </defs> </svg></div>
</template>
<template v-if="type === 0 || type === 1 || type === 4">
<i v-if="icon" :class="iconClass"></i>
<slot v-if="slots.default"></slot>

52
src/theme/index.css
View File

@ -869,9 +869,9 @@
}
.layui-layer-loading .layui-layer-content {
width: 60px;
/* width: 60px;
height: 24px;
background: url(loading-0.gif) no-repeat;
background: url(loading-0.gif) no-repeat; */
}
.layui-layer-loading .layui-layer-loading1 {
@ -1125,4 +1125,52 @@
transform: scale(0.7);
margin-left: -7px;
margin-right: 3px;
}
/* 下面是添加的新的加载动画 */
.loading {
width: 83px;
height: 83px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-filter: url("#goo");
filter: url("#goo");
}
.loading span {
width: 100%;
text-align: center;
color: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
font-weight: bold;
text-transform: uppercase;
font-size: 15px;
letter-spacing: 1px;
position: absolute;
left: 1px;
top: 46%;
}
.loading:before, .loading:after {
content: '';
border-radius: 50%;
background-color: rgb(22, 120, 160);
width: 26px;
height: 26px;
position: absolute;
left: 72px;
top: 8px;
animation: rotate 6s linear;
animation-iteration-count: infinite;
transform-origin: 12px 76px;
}
.loading:before {
box-shadow: 45px 19px 0px 0px rgb(22, 120, 160), 62px 63px 0px 0px rgb(22, 120, 160), 45px 107px 0px 0px rgb(22, 120, 160), 0px 126px 0px 0px rgb(22, 120, 160), -46px 107px 0px 0px rgb(22, 120, 160), -63px 63px 0px 0px rgb(22, 120, 160), -46px 19px 0px 0px rgb(22, 120, 160);
}
.loading:after {
animation-direction: reverse;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}