css编写加载页面动画效果

一、html代码

<!-- Loader -->
		<div id="loader-wrapper">
		  <div id="loader"></div>
		  <div class="loader-section section-left"></div>
		  <div class="loader-section section-right"></div>
		</div>
		 <div>222222</div>

二、js代码

<script>
	/* 创建loaded类*/
	window.onload = function () {
	  $('body').addClass('loaded');
	}
  
  /* 加载完成，结束加载动画 */
  var lod =document.getElementById("loader-wrapper");
  setTimeout('lod.style.display = "none"',2000);
</script>

三、css代码

/* Loader */
#loader-wrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 2000;

}
/* 构建动画 */
#loader {
	position: relative;
	top: 50%;
	left: 50%;
	border: 3px solid transparent;
	border-top-color: blue;
	height: 150px;
	width: 150px;
	border-radius: 50%;
	margin: -75px 0 0 -75px;
	animation: spin 2s linear infinite;
	z-index: 1001;
}
#loader:before{
	 content: "";
	position: absolute;
	 border-radius: 50%;
	 border: 3px solid transparent;
	 border-top-color: #e74c3c;
     top: 5px;
     left: 5px;
     right: 5px;
     bottom: 5px;
	  animation: spin 3s linear infinite; 
	
	 
}
 #loader::after{
 	 content: "";
 	position: absolute;
 	 border-radius: 50%;
 	 border: 3px solid transparent;
 	 border-top-color: #11e71f;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
 	  animation: spin 3s linear infinite; 
  }
  @keyframes spin {
    0% {
      transform: rotate(0deg); 
    }
    100% {
      transform: rotate(360deg); 
    }
  }

/* 背景动画 */
  #loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: #222222;
    z-index: 1000;
    transform: translateX(0); 
  }
#loader-wrapper .loader-section.section-left {
  left: 0;
}

四、运行效果