先看一下效果
loading.gif
直接上代碼：
HTML
<b class="loading5"></b>
CSS
/*圖形*/
.loading5 {
display: inline-block;
color: #fff;
width: 22px;
height: 22px;
position: relative;
animation: loading5 1s linear infinite;
margin: 28px;
background: radial-gradient(circle at 50% 7%, rgba(30, 30, 30, 1) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 32% 11%, rgba(30, 30, 30, .96) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 19% 20%, rgba(30, 30, 30, .94) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 10% 34%, rgba(30, 30, 30, .90) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 7% 50%, rgba(30, 30, 30, .86) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 10% 66.5%, rgba(30, 30, 30, .82) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 19% 80%, rgba(30, 30, 30, .78) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 33% 89%, rgba(30, 30, 30, .74) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 50% 93%, rgba(30, 30, 30, .66) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 68% 89%, rgba(30, 30, 30, .62) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 81% 80%, rgba(30, 30, 30, .56) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 90% 66.5%, rgba(30, 30, 30, .5) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 93% 50%, rgba(30, 30, 30, .4) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 90% 34%, rgba(30, 30, 30, .3) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 81% 20%, rgba(30, 30, 30, .2) 3%, rgba(0, 0, 0, 0) 4%), radial-gradient(circle at 68% 11%, rgba(30, 30, 30, .1) 3%, rgba(0, 0, 0, 0) 4%);
}
/*旋轉(zhuǎn)動(dòng)畫(huà)，兼容性這里就不寫(xiě)了，這里主要寫(xiě)圖形代碼*/
@keyframes loading5{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
