添加项目文件。
This commit is contained in:
102
HT.Cloud.Web/wwwroot/js/lay-module/loading/wcLoading.css
Normal file
102
HT.Cloud.Web/wwwroot/js/lay-module/loading/wcLoading.css
Normal file
@ -0,0 +1,102 @@
|
||||
.wc-loading {
|
||||
position:absolute;
|
||||
display:block;
|
||||
width:100%;
|
||||
height:100%;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
z-index:19891017;
|
||||
background-color:#fff
|
||||
}
|
||||
.wc-loading.close {
|
||||
animation: close 1s;
|
||||
-webkit-animation: close 1s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.ball-loader{
|
||||
position:absolute;
|
||||
left:50%;
|
||||
top:50%;
|
||||
transform:translate(-50%, -50%);
|
||||
-ms-transform:translate(-50%, -50%);
|
||||
-webkit-transform:translate(-50%, -50%)
|
||||
}
|
||||
.ball-loader>span, .signal-loader>span {
|
||||
background-color: #4aca85;
|
||||
display:inline-block
|
||||
}
|
||||
.wc-loading.orange_theme .ball-loader>span, .signal-loader>span{
|
||||
background-color: #FF4806;
|
||||
}
|
||||
.wc-loading.blue_theme .ball-loader>span, .signal-loader>span{
|
||||
background-color: #2D8CF0;
|
||||
}
|
||||
.ball-loader>span:nth-child(1), .ball-loader.sm>span:nth-child(1), .signal-loader>span:nth-child(1), .signal-loader.sm>span:nth-child(1) {
|
||||
-webkit-animation-delay:0s;
|
||||
animation-delay:0s
|
||||
}
|
||||
.ball-loader>span:nth-child(2), .ball-loader.sm>span:nth-child(2), .signal-loader>span:nth-child(2), .signal-loader.sm>span:nth-child(2) {
|
||||
-webkit-animation-delay:.1s;
|
||||
animation-delay:.1s
|
||||
}
|
||||
.ball-loader>span:nth-child(3), .ball-loader.sm>span:nth-child(3), .signal-loader>span:nth-child(3), .signal-loader.sm>span:nth-child(3) {
|
||||
-webkit-animation-delay:.15s;
|
||||
animation-delay:.15s
|
||||
}
|
||||
.ball-loader>span:nth-child(4), .ball-loader.sm>span:nth-child(4), .signal-loader>span:nth-child(4), .signal-loader.sm>span:nth-child(4) {
|
||||
-webkit-animation-delay:.2s;
|
||||
animation-delay:.2s
|
||||
}
|
||||
.ball-loader>span {
|
||||
width:20px;
|
||||
height:20px;
|
||||
margin:0 3px;
|
||||
border-radius:50%;
|
||||
transform:scale(0);
|
||||
-ms-transform:scale(0);
|
||||
-webkit-transform:scale(0);
|
||||
animation:ball-load 1s ease-in-out infinite;
|
||||
-webkit-animation:1s ball-load ease-in-out infinite
|
||||
}
|
||||
@-webkit-keyframes ball-load {
|
||||
0% {
|
||||
transform:scale(0);
|
||||
-webkit-transform:scale(0)
|
||||
}
|
||||
50% {
|
||||
transform:scale(1);
|
||||
-webkit-transform:scale(1)
|
||||
}
|
||||
100% {
|
||||
transform:scale(0);
|
||||
-webkit-transform:scale(0)
|
||||
}
|
||||
}
|
||||
@keyframes ball-load {
|
||||
0% {
|
||||
transform:scale(0);
|
||||
-webkit-transform:scale(0)
|
||||
}
|
||||
50% {
|
||||
transform:scale(1);
|
||||
-webkit-transform:scale(1)
|
||||
}
|
||||
100% {
|
||||
transform:scale(0);
|
||||
-webkit-transform:scale(0)
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes close {
|
||||
0% {
|
||||
opacity: 1;
|
||||
/*display: block;*/
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
/*display: none;*/
|
||||
}
|
||||
}
|
||||
|
||||
|
64
HT.Cloud.Web/wwwroot/js/lay-module/loading/wcLoading.js
Normal file
64
HT.Cloud.Web/wwwroot/js/lay-module/loading/wcLoading.js
Normal file
@ -0,0 +1,64 @@
|
||||
var wc_load_options = {
|
||||
time: 0,//初始时间设0
|
||||
content: "waterlcloud..."
|
||||
};
|
||||
|
||||
!function (content, options) {
|
||||
var load_config = parseInt(sessionStorage.getItem('layuiminiBgcolorId')) || 0;
|
||||
|
||||
|
||||
function templateFun(options) {
|
||||
//默认蓝色
|
||||
if (!load_config || load_config == 0 || load_config == 1 || load_config == 5) {
|
||||
return "<div class='wc-loading blue_theme'>" +
|
||||
"<div class='ball-loader'>" +
|
||||
"<span></span><span></span><span></span><span></span>" +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
}
|
||||
//绿色
|
||||
else if (load_config == 2 || load_config == 3 || load_config == 4) {
|
||||
return "<div class='wc-loading'>" +
|
||||
"<div class='ball-loader'>" +
|
||||
"<span></span><span></span><span></span><span></span>" +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
}
|
||||
//橙色
|
||||
else {
|
||||
return "<div class='wc-loading orange_theme'>" +
|
||||
"<div class='ball-loader'>" +
|
||||
"<span></span><span></span><span></span><span></span>" +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function headerInit(content, options) {
|
||||
options = options || {};
|
||||
if (typeof content == "string") {
|
||||
options["content"] = content || wc_load_options.content;
|
||||
} else if (typeof content == "object") {
|
||||
options = content;
|
||||
}
|
||||
options.time = options.time || wc_load_options.time;
|
||||
options.content = options.content || wc_load_options.content;
|
||||
return options;
|
||||
}
|
||||
|
||||
wc_load_options = headerInit(content, options);
|
||||
var template = templateFun(wc_load_options);
|
||||
document.writeln(template);
|
||||
}();
|
||||
|
||||
var wcLoading = {
|
||||
close: function (time, dom) {
|
||||
time = time || wc_load_options.time;
|
||||
dom = dom || document.getElementsByClassName("wc-loading")[0];
|
||||
dom.classList.add("close");
|
||||
dom.parentNode.removeChild(dom);/**删除当前节点*/
|
||||
}
|
||||
};
|
||||
|
||||
|
Reference in New Issue
Block a user