css3加载条（待更新）

半夜被蚊子咬醒，那就顺手来写博客吧。
最近对各种加载条产生兴趣，索性就来研究一下吧。
对我而言，加载条用gif实现，太浪费资源而且复用性不够，使用canvas好像又大材小用，自然是使用CSS3实现最为理想。
条形加载条
下面的代码是我对别人实现的改良版本，点击链接可以到codepen看效果和代码哦。
https://codepen.io/tcap99/pen/XxGoyyHTML

<div class="spinner">
  <div class="rect1"></div>
  <div class="rect2"></div>
  <div class="rect3"></div>
  <div class="rect4"></div>
  <div class="rect5"></div>
</div>

CSS

.spinner {
    margin: 200px auto;
    width: 50px;
    height: 60px;
    text-align: center;
    /* 设置加载条的间距 */
    font-size: 10px;
}
.spinner > div {
    background-color: deeppink;
    height: 100%;
    width: 5px;
    display: inline-block;
    animation: stretchdelay 1.2s infinite ease-in-out;
}
/* 线性的延后动画执行*/
.spinner .rect2 {
    animation-delay: -1.1s;
}
.spinner .rect3 {
    animation-delay: -1.0s;
}
.spinner .rect4 {
    animation-delay: -0.9s;
}
.spinner .rect5 {
    animation-delay: -0.8s;
}

@keyframes stretchdelay {
    0%, 40% {
        background-color: skyblue;
        transform: scaleY(.7);
     }  
    20% {
         background-color: deeppink;
         transform: scaleY(1.7);
   }
    100% {
      background-color: deeppink;
      transform: scaleY(.7);
  }
}`

哈哈，没用渐变色，但动画运行后就产生渐变色的效果，眼镜还真的好骗。
推荐一下，思否上的前端每日实战里面非常多简单有趣的css3动画效果，其中有如下的加载条效果
https://codepen.io/tcap99/pen/OBqdjz
圆形加载条
（待更新）