CSS3 LOADING 加载

1、html代码如下。

 

<div class="loading-mask"></div>
<div id="loadingBox" class="loading-content">
    <div class="mask"></div>   
    <div class="x-loading-spinner">  
        <span class="x-loading-top"></span>  
	<span class="x-loading-left"></span>  
	<span class="x-loading-bottom"></span>  
	        <span class="x-loading-right"></span>  
    </div> 
    <span class="txt">正在加载...</span> 
</div>

 

2、css样式

		.loading-mask{
			position: fixed;
			width: 100%;
		    height: 100%;
		    top: 0px;
		    left:  0px;
		    background-color: #cccccc;
		    opacity: .5;
		    z-index: 100;	
		}
		.loading-content{
			position: fixed;
			width: 150px;
			height: 100px;
			z-index: 110;
			top: 28%;
			left: 50%;
			margin-left: -75px;    
		}
		.loading-content .mask{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0px;
			left: 50%;
			margin-left: -50%;
			background-color: #333;
			border: 1px solid #333;
			border-radius: 5px;
			opacity: .3;
		}
		.loading-content span.txt{
			font-size: 16px;
			position: absolute;
			bottom: 10px;
			text-align: center;
			width: 100%;
			color: #555555;
		}
		.x-loading-spinner{
		    position: absolute;
		    top: 18%;
		    left: 50%;
		    margin-left: -20px;
		}
		.x-loading-spinner {
		    font-size: 270%;
		    height: 1em;
		    width: 1em;
		    -webkit-transform-origin: 0.5em 0.5em;
		    -moz-transform-origin: 0.5em 0.5em;
		    -ms-transform-origin: 0.5em 0.5em;
		}
		.x-loading-spinner > span, .x-loading-spinner > span:before, .x-loading-spinner > span:after {
		    display: block;
		    position: absolute;
		    width: 0.1em;
		    height: 0.25em;
		    top: 0;
		    transform-origin: 0.05em 0.5em;
		    -webkit-transform-origin: 0.05em 0.5em;
		    -moz-transform-origin: 0.05em 0.5em;
		    -ms-transform-origin: 0.05em 0.5em;
		    -webkit-border-radius: 0.05em;
		    -moz-border-radius: 0.05em;
		    -ms-border-radius: 0.05em;
		    border-radius: 0.05em;
		    content: " ";
		}
		.x-loading-spinner > span.x-loading-top {
		    background-color: rgba(96, 96, 96, 0.99);
		}
		.x-loading-spinner > span.x-loading-top::after {
		    background-color: rgba(96, 96, 96, 0.9);
		}
		.x-loading-spinner > span.x-loading-left::before {
		    background-color: rgba(96, 96, 96, 0.8);
		}
		.x-loading-spinner > span.x-loading-left {
		    background-color: rgba(96, 96, 96, 0.7);
		}
		.x-loading-spinner > span.x-loading-left::after {
		    background-color: rgba(96, 96, 96, 0.6);
		}
		.x-loading-spinner > span.x-loading-bottom::before {
		    background-color: rgba(96, 96, 96, 0.5);
		}
		.x-loading-spinner > span.x-loading-bottom {
		    background-color: rgba(96, 96, 96, 0.4);
		}
		.x-loading-spinner > span.x-loading-bottom::after {
		    background-color: rgba(96, 96, 96, 0.35);
		}
		.x-loading-spinner > span.x-loading-right::before {
		    background-color: rgba(96, 96, 96, 0.3);
		}
		.x-loading-spinner > span.x-loading-right {
		    background-color: rgba(96, 96, 96, 0.25);
		}
		.x-loading-spinner > span.x-loading-right::after {
		    background-color: rgba(96, 96, 96, 0.2);
		}
		.x-loading-spinner > span.x-loading-top::before {
		    background-color: rgba(96, 96, 96, 0.15);
		}
		.x-loading-spinner > span {
		    left: 50%;
		    margin-left: -0.05em;
		}
		.x-loading-spinner > span.x-loading-top {
		    -webkit-transform: rotate(0deg);
		    -moz-transform: rotate(0deg);
		    -ms-transform: rotate(0deg);
		    transform: rotate(0deg);
		}
		.x-loading-spinner > span.x-loading-right {
		    -webkit-transform: rotate(90deg);
		    -moz-transform: rotate(90deg);
		    -ms-transform: rotate(90deg);
		    transform: rotate(90deg);
		}
		.x-loading-spinner > span.x-loading-bottom {
		    -webkit-transform: rotate(180deg);
		    -moz-transform: rotate(180deg);
		    -ms-transform: rotate(180deg);
		    transform: rotate(180deg);
		}
		.x-loading-spinner > span.x-loading-left {
		    -webkit-transform: rotate(270deg);
		    -moz-transform: rotate(270deg);
		    -mstransform: rotate(270deg);
		    transform: rotate(270deg);
		}
		.x-loading-spinner > span::before {
		    -webkit-transform: rotate(30deg);
		    -moz-transform: rotate(30deg);
		    -ms-transform: rotate(30deg);
		    transform: rotate(30deg);
		}
		.x-loading-spinner > span::after {
		    -webkit-transform: rotate(-30deg);
		    -moz-transform: rotate(-30deg);
		    -ms-transform: rotate(-30deg);
		    transform: rotate(-30deg);
		}
		.x-loading-spinner {
			animation: x-loading-spinner-rotate 1s infinite linear;
			-webkit-animation: x-loading-spinner-rotate 1s infinite linear;
			-moz-animation: x-loading-spinner-rotate 1s infinite linear;
			-ms-animation: x-loading-spinner-rotate 1s infinite linear;
		}
		@keyframes x-loading-spinner-rotate {
		    from {
		    	transform: rotate(30deg);
		    }
		    to {
		    	transform: rotate(330deg);
		    }
		}
		@-webkit-keyframes x-loading-spinner-rotate {
		    from {
		    	-webkit-transform: rotate(30deg);
		    }
		    to {
		    	-webkit-transform: rotate(330deg);
		    }
		}
		@-moz-keyframes x-loading-spinner-rotate {
		    from {
		    	-webkit-transform: rotate(30deg);
		    }
		    to {
		    	-webkit-transform: rotate(330deg);
		    }
		}
		@-ms-keyframes x-loading-spinner-rotate {
		    from {
		    	-webkit-transform: rotate(30deg);
		    }
		    to {
		    	-webkit-transform: rotate(330deg);
		    }
		}