纯css 加载动画

NO.1

	<div class="loding">
		<div id="preloader_1">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>

		.loding{
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background: #FFFFFF;
			z-index: 999;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		#preloader_1{
		    position:relative;
		}
		#preloader_1 span{
		    display:block;
		    bottom:0px;
		    width: 9px;
		    height: 5px;
		    background:#9b59b6;
		    position:absolute;
		    animation: preloader_1 1.5s  infinite ease-in-out;
		}  
		#preloader_1 span:nth-child(2){
		    left:11px;
		    animation-delay: .2s;  
		}
		#preloader_1 span:nth-child(3){
		    left:22px;
		    animation-delay: .4s;
		}
		#preloader_1 span:nth-child(4){
		    left:33px;
		    animation-delay: .6s;
		}
		#preloader_1 span:nth-child(5){
		    left:44px;
		    animation-delay: .8s;
		}
		@keyframes preloader_1 {
		    0% {height:5px;transform:translateY(0px);background:#FE6280;}
		    25% {height:30px;transform:translateY(15px);background:#F42B85;}
		    50% {height:5px;transform:translateY(0px);background:#F42B85;}
		    100% {height:5px;transform:translateY(0px);background:#FE6280;}
		}

NO.2

	<div class="NZ-loading-container loading-inline">
		<div class="NZ-loading-item NZ-loading-cricel-1"></div>
		<div class="NZ-loading-item NZ-loading-cricel-2"></div>
		<div class="NZ-loading-item NZ-loading-cricel-3"></div>
		<div class="NZ-loading-item NZ-loading-cricel-4"></div>
		<div class="NZ-loading-item NZ-loading-cricel-5"></div>
		<div class="NZ-loading-item NZ-loading-cricel-6"></div>
		<div class="NZ-loading-item NZ-loading-cricel-7"></div>
		<div class="NZ-loading-item NZ-loading-cricel-8"></div>
	</div>

		.NZ-loading-container {
			position: relative;
			z-index: 2000;
			overflow: hidden;
			width: 200px;
			height: 60px;
			margin: 0 auto;
			margin-top: 100px
		}

		.NZ-loading-item {
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 1000;
			display: inline-block;
			height: 10px;
			width: 10px;
			border-radius: 100%;
			/************* 颜色在这里 *************/
			background-color: #4b9cdb;
			opacity: 0
		}

		.NZ-loading-cricel-1 {
			animation: NZ-motion-Loading 4s infinite;
			animation-delay: .8s
		}

		.NZ-loading-cricel-2 {
			animation: NZ-motion-Loading 4s infinite;
			transform: translateX(20px);
			animation-delay: .7s
		}

		.NZ-loading-cricel-3 {
			animation: NZ-motion-Loading 4s infinite;
			transform: translateX(40px);
			animation-delay: .6s
		}

		.NZ-loading-cricel-4 {
			animation: NZ-motion-Loading 4s infinite;
			transform: translateX(60px);
			animation-delay: .5s
		}

		.NZ-loading-cricel-5 {
			animation: NZ-motion-Loading 4s infinite;
			transform: translateX(80px);
			animation-delay: .4s
		}

		.NZ-loading-cricel-6 {
			animation: NZ-motion-Loading 4s infinite;
			transform: translateX(100px);
			animation-delay: .3s
		}

		.NZ-loading-cricel-7 {
			animation: NZ-motion-Loading 4s infinite;
			transform: translateX(120px);
			animation-delay: .2s
		}

		.NZ-loading-cricel-8 {
			animation: NZ-motion-Loading 4s infinite;
			transform: translateX(140px);
			animation-delay: .1s
		}

		.loading-inline {
			position: absolute
		}

		.NZ-loadingbg.white.motion {
			animation-duration: 1s;
			animation-direction: normal;
			animation-iteration-count: 1;
			animation-fill-mode: forwards
		}

		@keyframes NZ-motion-Loading {
			40% {left: 45%;opacity: .8}
			100% {left: 100%;opacity: 0}
		}

		.NZ-loadingbg.black.motion-show {
			animation-name: NZ-loading--white-bgshow
		}

		@keyframes NZ-loading-motion-bg-black {
			0% {opacity: 0}
			100% {opacity: .3}
		}

		@-webkit-keyframes NZ-loading-motion-bg-black {
			0% {opacity: 0}
			100% {opacity: .3}
		}

		.NZ-loadingbg.white.motion-show {
			animation-name: NZ-loading--white-bgshow
		}

		@keyframes NZ-loading--white-bgshow {
			0% {background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 100%);transform: translateY(100px);opacity: 0}
			100% {background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);transform: translateY(0px);opacity: 1}
		}

		@-webkit-keyframes NZ-loading--white-bgshow {
			0% {background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 100%);-webkit-transform: translateY(100px);opacity: 0}
			100% {background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);-webkit-transform: translateY(0px);opacity: 1}
		}

		.NZ-loadingbg.white.motion-hide {
			animation-name: NZ-loading--white-bghide
		}

		@keyframes NZ-loading--white-bghide {
			0% {background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);transform: translateY(0px);opacity: 1}
			100% {background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 100%);transform: translateY(100px);opacity: 0}
		}

		@-webkit-keyframes NZ-loading--white-bghide {
			0% {background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);-webkit-transform: translateY(0px);opacity: 1}
			100% {background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 100%);-webkit-transform: translateY(100px);opacity: 0}
		}