HTML添加纯CSS代码loading进度效果

建了个音乐播放页面，由于没有数据库后台加载需要一点时间，为了改善一下客户体验，学习了网友的纯CSS loading效果，在此做个笔记备忘。
CSS代码：

/* waiting loading top */
.waiting {
    position: relative;
    width: 118px;
    height: 35px;
    line-height: 35px;
    background: #E4F1FD;
    border-radius: 20px;
    margin-top: -25px;
    margin-left: 15px;
    color: #FFAF32;
}
  /*这个是每个点的自己的块*/
.waiting li {
    position: absolute; 
    top: 13px; 
    width: 10px; 
    height: 10px;
    line-height: 10px;
    list-style: none;
    -webkit-animation: bounce_waiting 1.2s linear infinite;
    -webkit-transform: scale(0); 
    -webkit-border-radius: 5px;
    animation: bounce_waiting 1.2s linear infinite;
    transform: scale(0); 
    border-radius: 5px; 
}
.waiting li:first-child { 
    left: 15px; 
    -webkit-animation-delay: 0.48s; 
    animation-delay: .48s; 
}
.waiting li:nth-child(2) { 
    left: 30px; 
    -webkit-animation-delay: 0.6s; 
    animation-delay: 0.6s; 
}
.waiting li:nth-child(3) { 
    left: 45px; 
    -webkit-animation-delay: 0.72s; 
    animation-delay: 0.72s; 
}
.waiting li:nth-child(4) {
    left: 60px;
    -webkit-animation-delay: 0.84s;
    animation-delay: 0.84s;
}
.waiting li:nth-child(5) {
    left: 75px;
    -webkit-animation-delay: 0.96s;
    animation-delay: 0.96s;
}
.waiting li:nth-child(6) {
    left: 90px;
    -webkit-animation-delay: 1.08s;
    animation-delay: 1.08s;
}
  
  /*定义动画函数，从1倍减小到0*/
@-webkit-keyframes bounce_waiting { 
      0% {
         -webkit-transform:scale(1);
         background-color:#FFAF32;
     }
      100% {
         -webkit-transform:scale(0);
         background-color:#ffffff;
     }
}
@keyframes bounce_waiting { 
    0% {
        transform:scale(1);
        background-color:#FFAF32;
        }
    100% {
        transform:scale(0);
        background-color:#ffffff;
        }
}
/* waiting loading  */

---

html添加div类代码：

	<div class="waiting">
    	<ul>
        	<Li></Li>
        	<Li></Li>
        	<Li></Li>
        	<Li></Li>
        	<Li></Li>
        	<Li></Li>
    	</ul>
	</div>