loading 功能实现(遮罩)

1. loading 样式图标可以从网站定制： https://loading.io/

2. css 样式：

@keyframes lds-spinner {0% {opacity: 1;}100% {opacity: 0;}
 }@-webkit-keyframes lds-spinner {0% {opacity: 1;}100% {opacity: 0;}
 }
 .lds-css {position:fixed; top:0;width: 100%; height: 100%;background-color: #eeeeee;z-index:9999;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;}.lds-spinner {position: relative;
 }.lds-spinner div {left: 94px;top: 45px;position: absolute;-webkit-animation: lds-spinner linear 2.8s infinite;animation: lds-spinner linear 2.8s infinite;background: rgba(12.376037979306128%,76%,8.546415094339627%,0.852);width: 12px;height: 38px;border-radius: 58%;-webkit-transform-origin: 6px 55px;transform-origin: 6px 55px;
 }
 .lds-spinner div:nth-child(1) {-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-animation-delay: -2.52s;animation-delay: -2.52s;
 }
 .lds-spinner div:nth-child(2) {-webkit-transform: rotate(36deg);transform: rotate(36deg);-webkit-animation-delay: -2.24s;animation-delay: -2.24s;
 }
 .lds-spinner div:nth-child(3) {-webkit-transform: rotate(72deg);transform: rotate(72deg);-webkit-animation-delay: -1.96s;animation-delay: -1.96s;
 }
 .lds-spinner div:nth-child(4) {-webkit-transform: rotate(108deg);transform: rotate(108deg);-webkit-animation-delay: -1.68s;animation-delay: -1.68s;
 }
 .lds-spinner div:nth-child(5) {-webkit-transform: rotate(144deg);transform: rotate(144deg);-webkit-animation-delay: -1.4s;animation-delay: -1.4s;
 }
 .lds-spinner div:nth-child(6) {-webkit-transform: rotate(180deg);transform: rotate(180deg);-webkit-animation-delay: -1.12s;animation-delay: -1.12s;
 }
 .lds-spinner div:nth-child(7) {-webkit-transform: rotate(216deg);transform: rotate(216deg);-webkit-animation-delay: -0.84s;animation-delay: -0.84s;
 }
 .lds-spinner div:nth-child(8) {-webkit-transform: rotate(252deg);transform: rotate(252deg);-webkit-animation-delay: -0.56s;animation-delay: -0.56s;
 }
 .lds-spinner div:nth-child(9) {-webkit-transform: rotate(288deg);transform: rotate(288deg);-webkit-animation-delay: -0.28s;animation-delay: -0.28s;
 }
 .lds-spinner div:nth-child(10) {-webkit-transform: rotate(324deg);transform: rotate(324deg);-webkit-animation-delay: 0s;animation-delay: 0s;
 }
 .lds-spinner {width: 120px !important;height: 120px !important;left:40%;right:60%;top:38%;button:62%;
 }

3. js 代码 ：

function loading() {document.getElementById("loadDiv").style.visibility="visible";//显示
 }function autoCloseLoading(){setTimeout(function(){closeLoading()},15000);
 }function closeLoading() {document.getElementById("loadDiv").style.visibility="hidden";//隐藏
 }
 

4. html 代码：

5 效果图：

6.这边有一个可以直接验证的html,大家可以下载使用查看效果：https://download.csdn.net/download/u012149894/10832229