CSS Loading 纯css

<div class="loading"> 
<span></span> 
<span></span> 
<span></span>
</div>

<style>
.loading{ position: absolute; left:60px; top:60px; width:40px; backgrouond:#efefef;}
.loading>span{ display: inline-block; width:10px; height:10px; border-radius: 50%; background:#ccc; -webkit-animation: beat 0.7s infinite linear; animation: beat 0.7s infinite linear; -webkit-animation-fill-mode: both; animation-fill-mode: both;} 
.loading>span:nth-child(odd){ animation-delay: 0s;}
.loading>span:nth-child(even){ animation-delay: 0.35s;} @-webkit-keyframes beat{ 50%{ -webkit-transform: scale(0.75); transform: scale(0.75); -webkit-opacity: 0.2; opacity: 0.2; } 100%{ -webkit-transform: scale(1); transform: scale(1); -webkit-opacity: 1; opacity: 1; }}@keyframes beat{ 50%{ -webkit-transform: scale(0.75); transform: scale(0.75); -webkit-opacity: 0.2; opacity: 0.2; } 100%{ -webkit-transform: scale(1); transform: scale(1); -webkit-opacity: 1; opacity: 1; }}
</style>

原文来自 @幸福的彼岸 copied by Dylan. 2016-7