CSS 各种loading 实现

CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，对自己做个总结吧……

1:loading 简单实现(圆形闪烁)

.load{

    width: 40px;

    height: 40px;

    border-radius: 50px;

    background: red;

    animation: fadeOut 1.0s infinite ease-in-out;

    -webkit-animation: fadeOut 1.0s infinite ease-in-out;

}

@keyframes fadeOut {

      from{transform: scale(0.0)}

      to{transform: scale(1.0);opacity: 0}

  }

  @-webkit-keyframes  fadeOut{

      from{transform: scale(0.0)}

      to{transform: scale(1.0);opacity: 0}

  }

<div class="load"></div>

2:线条波动效果

代码实现:(主要依赖 : animation-delay)

.box .lineload >div{

      width: 3px;

      height: 50px;

      background: green;

      animation: strechdeley 1.2s infinite ease-in-out;

      -webkit-animation: strechdeley 1.2s infinite ease-in-out;;

      margin-left: 3px;

  }

.box .lineload .line1{

  animation-delay: -1.1s;

}

.box .lineload .line2{

  animation-delay: -1s;

}

.box .lineload .line3{

  animation-delay: -0.9s;

}

.box .lineload .line4{

  animation-delay: -0.8s;

}

.box .lineload .line5{

  animation-delay: -0.7s;

}

    @keyframes strechdeley{

        0%,40%,100%{

          transform: scale(0.4);

        }

      20%{

          transform: scale(1.0);

      }

  }

@-webkit-keyframes  strechdeley{

  0%,40%,100%{

      -webkit-transform: scale(0.4);

  }

  20%{

      -webkit-transform: scale(1.0);

  }

html

<div class="lineload">

    <div class="line1"></div>

    <div class="line2"></div>

    <div class="line3"></div>

    <div class="line4"></div>

    <div class="line5"></div>

</div>

3:圆环loading 旋转动画

@keyframes am-ringload {

    from { transform: rotate(0deg)}

    to{ transform: rotate(360deg)}

}

@-webkit-keyframes  am-ringload {

  from { -webkit-transform: rotate(0deg)}

  to{ -webkit-transform: rotate(360deg)}

}

.box .ringload {

  width: 60px;

  height: 60px;

  background: black;

  border: 5px solid #666666;

  border-left-color:#ffffff ;

  margin-left: 50px;

  border-radius: 50%;

  animation: am-ringload 1s infinite ease;

  -webkit-animation: am-ringload 1s infinite ease;

}

<div class="ringload">

</div>

4:使用1,2原理可实现省略号效果的loading ,自身尝试吧!