进度条动画集合

 1 //html
 2  <div class="loader">
 3            <div class="loader-inner ball-pulse">
 4                <div></div>
 5                <div></div>
 6                <div></div>
 7            </div>
 8        </div>
 9 //css
10   @keyframes scale {
11              30% {
12                  -webkit-transform: scale(0.3);
13                  transform: scale(0.3); }
14 
15              100% {
16                  -webkit-transform: scale(1);
17                  transform: scale(1); } }
18          .ball-pulse > div:nth-child(0) {
19              -webkit-animation: scale 0.75s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
20              animation: scale 0.75s 0s infinite cubic-bezier(.2, .68, .18, 1.08); }
21          .ball-pulse > div:nth-child(1) {
22              -webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
23              animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08); }
24          .ball-pulse > div:nth-child(2) {
25              -webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
26              animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08); }
27          .ball-pulse > div:nth-child(3) {
28              -webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
29              animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08); }
30          .ball-pulse > div {
31              background-color: #fff;
32              width: 15px;
33              height: 15px;
34              border-radius: 100%;
35              margin: 2px;
36              -webkit-animation-fill-mode: both;
37              animation-fill-mode: both;
38              display: inline-block; }