第一种:

 <!DOCTYPE html>
    <html>
    <head>
    	<title>loading</title>
    	<style type="text/css">
    		.loadingTip {
    			position: fixed;
    			top:50%;
    			left: 50%;
    			-webkit-transform:translate3d(-50%,-50%,0);
    			z-index: 10001;
    		}
    		.loadingTip div {
    			background-color: #000;
    			width: 15px;
    			height: 15px;
    			border-radius: 100%;
    			margin: 2px;
    			-webkit-animation-fill-mode: both;
    			animation-fill-mode: both;
    			position: absolute;
    		}
    		@-webkit-keyframes loading {
    		  	50% {
    		    	opacity: 0.3;
    		    	-webkit-transform: scale(0.4);
    		        transform: scale(0.4); 
    		    }
    		  	100% {
    			    opacity: 1;
    			    -webkit-transform: scale(1);
    	            transform: scale(1); 
    	        } 
    	    }
    		.loadingTip > div:nth-child(1) {
    		    top: 25px;
    		    left: 0;
    		    -webkit-animation: loading 1s 0s infinite linear;
    		    animation: loading 1s 0s infinite linear;
    		}
    		.loadingTip > div:nth-child(2) {
    		    top: 17.04545px;
    		    left: 17.04545px;
    		    -webkit-animation: loading 1s 0.12s infinite linear;
    		    animation: loading 1s 0.12s infinite linear;
    		}
    		.loadingTip > div:nth-child(3) {
    			top: 0;
    			left: 25px;
    			-webkit-animation: loading 1s 0.24s infinite linear;
    			animation: loading 1s 0.24s infinite linear;
    		}
    		.loadingTip > div:nth-child(4) {
    			top: -17.04545px;
    			left: 17.04545px;
    			-webkit-animation: loading 1s 0.36s infinite linear;
    			animation: loading 1s 0.36s infinite linear;
    		}
    		.loadingTip > div:nth-child(5) {
    			top: -25px;
    			left: 0;
    			-webkit-animation: loading 1s 0.48s infinite linear;
    			animation: loading 1s 0.48s infinite linear;
    		}
    		.loadingTip > div:nth-child(6) {
    			top: -17.04545px;
    			left: -17.04545px;
    			-webkit-animation: loading 1s 0.6s infinite linear;
    			animation: loading 1s 0.6s infinite linear;
    		}
    		.loadingTip > div:nth-child(7) {
    			top: 0;
    		    left: -25px;
    		    -webkit-animation: loading 1s 0.72s infinite linear;
    		    animation: loading 1s 0.72s infinite linear;
    		}
    		.loadingTip > div:nth-child(8) {
    			top: 17.04545px;
    			left: -17.04545px;
    			-webkit-animation: loading 1s 0.84s infinite linear;
    			animation: loading 1s 0.84s infinite linear;
    		}
    
    	</style>
        </head>
    <body>
        <div class="loadingTip">
        	<div></div>
        	<div></div>
        	<div></div>
        	<div></div>
        	<div></div>
        	<div></div>
        	<div></div>
        	<div></div>
        </div>
    </body>
    </html>

 

第二种:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>loading</title>
    <style type="text/css">
        .loading {
            position: fixed;
            top:50%;
            left: 50%;
            -webkit-transform:translate3d(-50%,-50%,0);
            z-index: 10001;
        }
        .loading > div {
            background-color: #0091ff;
            width: 15px;
            height: 15px;
            border-radius: 100%;
            margin: 2px;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            display: inline-block;
        }
        .loading > div:nth-child(1) {
            -webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
            animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
        }
        .loading > div:nth-child(2) {
            -webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
            animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
        }
        .loading > div:nth-child(3) {
            -webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
            animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
        }
        @-webkit-keyframes scale {
            0% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1;
            }
            45% {
                -webkit-transform: scale(0.1);
                transform: scale(0.1);
                opacity: 0.7; 
            }
            80% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1; 
            } 
        }
    </style>
</head>
<body>
    <div class="loading">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>