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 代碼：

<div id="loadDiv" class="lds-css" style="visibility:hidden">
<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>

5 效果圖：