.spinner {
  margin: 0px auto ;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}
		.leftside {
position:absolute;
left:0;
width:50%;
height:100%;
background:#e74b3b;
-webkit-transition: all 1.5s;
  -moz-transition: all 1.5s;
  -o-transition: all 1.5s;
  transition: all 1.5s;
}
/*左邊全屏 寬度50%*/
.rightside {
position:absolute;
right:0;
width:50%;
height:100%;
background:#e74b3b;
-webkit-transition: all 1.5s;
  -moz-transition: all 1.5s;
  -o-transition: all 1.5s;
  transition: all 1.5s;
}
/*右邊全屏 寬度50%*/
var loaded = false;//宣告一個laoded =false
function hide_loader() {
	if (!loaded) { //true
		$('body').css('overflow', 'visible');
		$(".leftside").stop().css('width', '0px');//loading完成對.leftside執行
		$(".rightside").stop().css('width', '0px');//loading完成對.rightside執行
		$('.spinner').stop().css('top', '-1000px');
		$('.spinner-wrap').fadeOut(1000, function () {//spinner-wrap fadeOut接著在HTML裡面刪除
			$(this).remove()
		});
		loaded = true
	}
}
setTimeout(function () {
	hide_loader()
},
10000);
$(window).load(function () {//loading時執行這個function
	hide_loader()
 
});
 $('body').after("<div class='spinner-wrap'><div class='leftside'/><div class='rightside'/><div class='spinner'><div class='bounce1'/><div class='bounce2'/><div class='bounce3'/></div></div>")
		//在body下新增div

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js