两款自己喜欢的css loading加载

October 4, 2017

 干货

    footer.php 添加

    <div id="loading-center-absolute">

    <div id="loading-center-absolute">

    <div class="object" id="object_four"></div>

    <div class="object" id="object_three"></div>

    <div class="object" id="object_two"></div>

    <div class="object" id="object_one">

    </div>

    </div>

    在主题样式表添加以下代码

    // ** loading加载 ** //
    .spinner {
      margin: 100px auto 0;
      width: 150px;
      text-align: center;
    }
     
    .spinner > div {
      width: 30px;
      height: 30px;
      background-color: #2894FF;
     
      border-radius: 100%;
      display: inline-block;
      -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
      animation: bouncedelay 1.4s infinite ease-in-out;
      /* Prevent first frame from flickering when animation starts */
      -webkit-animation-fill-mode: both;
      animation-fill-mode: 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 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);
      }
    }
    	-----
    	#loading{
    		background-color: #FFF;
    		height: 100%;
    		width: 100%;
    		position: fixed;
    		z-index: 1;
    		margin-top: 0px;
    		top: 0px;
    	}
    	#loading-center{
    		width: 100%;
    		height: 100%;
    		position: relative;
    		}
    	#loading-center-absolute {
    		position: absolute;
    		left: 50%;
    		top: 50%;
    		height: 200px;
    		width: 200px;
    		margin-top: -100px;
    		margin-left: -100px;
    		-ms-transform: rotate(-135deg); 
    	   	-webkit-transform: rotate(-135deg); 
    	    transform: rotate(-135deg);
    	}
    	.object{
    
    		-moz-border-radius: 50% 50% 50% 50%;
    		-webkit-border-radius: 50% 50% 50% 50%;
    		border-radius: 50% 50% 50% 50%;
    		position: absolute;
    		border-top: 5px solid #2984FF;
    		border-bottom: 5px solid transparent;
    		border-left:  5px solid #2984FF;
    		border-right: 5px solid transparent;
    		
    		-webkit-animation: animate 2s infinite;
    		animation: animate 2s infinite;	
    
    		}
    	#object_one{
    		left: 75px;
    		top: 75px;
    		width: 50px;
    		height: 50px;
    		}
    								
    	#object_two{
    		left: 65px;
    		top: 65px;
    		width: 70px;
    		height: 70px;
    		-webkit-animation-delay: 0.2s;
    	    animation-delay: 0.2s;
    		}
    			
    	#object_three{
    		left: 55px;
    		top: 55px;
    		width: 90px;
    		height: 90px;
    		-webkit-animation-delay: 0.4s;
    	    animation-delay: 0.4s;
    		}
    	#object_four{
    		left: 45px;
    		top: 45px;
    		width: 110px;
    		height: 110px;
    		-webkit-animation-delay: 0.6s;
    	    animation-delay: 0.6s;
    		
    		}	
    
    	@-webkit-keyframes animate {
    	 
    
    	50% {
    
    		-ms-transform: rotate(360deg) scale(0.8); 
    	   	-webkit-transform: rotate(360deg) scale(0.8); 
    	    transform: rotate(360deg) scale(0.8); 
    	  }
    	}
    
    	@keyframes animate {
    		
    	50% {
    
    		-ms-transform: rotate(360deg) scale(0.8); 
    	   	-webkit-transform: rotate(360deg) scale(0.8); 
    	    transform: rotate(360deg) scale(0.8); 
    	  }	
    	}
    

    在footer.php添加
    <div class="spinner">
    <div class="bounce1"></div>
    <div class="bounce2"></div>
    <div class="bounce3"></div>
    </div>

    样式表里添加

    .spinner {
      margin: 100px auto 0;
      width: 150px;
      text-align: center;
    }
     
    .spinner > div {
      width: 30px;
      height: 30px;
      background-color: #2984FF;
     
      border-radius: 100%;
      display: inline-block;
      -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
      animation: bouncedelay 1.4s infinite ease-in-out;
      /* Prevent first frame from flickering when animation starts */
      -webkit-animation-fill-mode: both;
      animation-fill-mode: 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 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);
      }
    }