loading
myLoading('加载中'); myLoading('加载完成', false); /*使用myLoading需要载入loading.css*/ window.myLoading = function (msg, isShow) { isShow = isShow !== false; if (isShow) { if (document.getElementsByClassName('spinner-wrap').length !== 0) { return; } var wrap = document.createElement('div'); wrap.setAttribute('class', 'spinner-wrap'); var spinner = document.createElement('div'); spinner.setAttribute('class', 'spinner'); wrap.appendChild(spinner); for (var i = 1; i <= 3; i++) { var spinnerContainer = document.createElement('div'); spinnerContainer.setAttribute('class', 'spinner-container container' + i); for (var j = 1; j <= 4; j++) { var circle = document.createElement('div'); circle.setAttribute('class', 'circle' + j); spinnerContainer.appendChild(circle); } spinner.appendChild(spinnerContainer); } var p = document.createElement('p'); p.innerHTML = msg; wrap.appendChild(p); document.body.appendChild(wrap); } else { if (document.getElementsByClassName('spinner-wrap').length !== 0) { // console.log('test'); document.body.removeChild(document.getElementsByClassName('spinner-wrap')[0]); } } };
.spinner-wrap { position: fixed; width: 100px; height: 100px; left: 50%; top: 50%; border-radius: 5px; margin-left: -50px; margin-top: -50px; background: #000; opacity: 0.6; } .spinner-wrap p { color: white; text-align: center; margin: 0; line-height: 22px; margin-top: 70px; } .spinner { width: 20px; height: 20px; position: absolute; left: 50%; top: 50%; margin-left: -10px; margin-top: -10px; } .container1>div, .container2>div, .container3>div { width: 6px; height: 6px; background-color: #fff; border-radius: 100%; position: absolute; -webkit-animation: bouncedelay 1.2s infinite ease-in-out; animation: bouncedelay 1.2s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .spinner .spinner-container { position: absolute; width: 100%; height: 100%; } .container2 { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .container3 { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } .circle1 { top: 0; left: 0; } .circle2 { top: 0; right: 0; } .circle3 { right: 0; bottom: 0; } .circle4 { left: 0; bottom: 0; } .container2 .circle1 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .container3 .circle1 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .container1 .circle2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .container2 .circle2 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .container3 .circle2 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .container1 .circle3 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .container2 .circle3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .container3 .circle3 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .container1 .circle4 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .container2 .circle4 { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .container3 .circle4 { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(1.0); } }