四个Loading加载动画，还不快快存起来！

loading-1

平时开发的时候，我们遇到加载，要么是 UI 框架中自带，要么就是百度，然后 CV 到项目中？但是，自己实现的时候，又会没有思路。久而久之，变成了 CV 工程师。本文针对不同的加载方式，讲解其中的思路，希望大家不只是会用，更要是会写。实践才能出真知。

<span class="loader-1">Loading</span>

.loader-1 {
    font-size: 48px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FF3D00;
    letter-spacing: 2px;
    position: relative;
}
.loader-1::after {
    content: "Loading";
    position: absolute;
    left: 0;
    top: 0;
    color: #FFF;
    width: 100%;
    height: 50%;
    overflow: hidden;
    animation: loaderHeight 6s linear infinite;
}
@keyframes loaderHeight {
    0% {
      height: 100%;
    }
    100% {
      height: 0%;
    }
  }

案例效果：http://code.wubin.work/code/css/loading-four.html

loading-2

 <span class="loader-2">Loading </span>

.loader-2{
    font-size: 48px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #263238;
    text-shadow: 0 0 2px #fff, 0 0 1px #fff, 0 0 1px #fff;
    letter-spacing: 2px;
    position: relative;
}
.loader-2::after {
    content: "Loading";
    position: absolute;
    left: 0;
    top: 0;
    color: #FFF;
    width: 100%;
    height: 100%;
    overflow: hidden;
    animation: loderWidth 6s linear infinite;
}
@keyframes loderWidth {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

案例效果：http://code.wubin.work/code/css/loading-four.html

loading-3

<span class="loader-3">Load&nbsp;ng </span>
这里用了一个空格来占位

.loader-3 {
  color: #FFF;
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 48px;
  letter-spacing: 4px;
}
.loader-3::before {
  content: "";
  position: absolute;
  right: 70px;
  bottom: 10px;
  height: 28px;
  width: 5.15px;
  background: currentColor;
  animation: loaderL 1s linear infinite alternate;

}
@keyframes loaderL {
    0% {
      box-shadow: 0 -6px, -122.9px -8px;
    }
    25%, 75% {
      box-shadow: 0 0px, -122.9px -8px;
    }
    100% {
      box-shadow: 0 0px, -122.9px -16px;
    }
}
.loader-3::after {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    left: 125px;
    top: 2px;
    border-radius: 50%;
    background: red;
    animation: animloader113 1s linear infinite alternate;
  }
  @keyframes animloader113 {
      0% {
        transform: translate(0px, 0px) scaleX(1);
      }
      14% {
        transform: translate(-12px, -16px) scaleX(1.05);
      }
      28% {
        transform: translate(-27px, -28px) scaleX(1.07);
      }
      42% {
        transform: translate(-46px, -35px) scaleX(1.1);
      }
      57% {
        transform: translate(-70px, -37px) scaleX(1.1);
      }
      71% {
        transform: translate(-94px, -32px) scaleX(1.07);
      }
      85% {
        transform: translate(-111px, -22px) scaleX(1.05);
      }
      100% {
        transform: translate(-125px, -9px) scaleX(1);
      }
    }

注意这里的L上方竖线，是使用before阴影模拟的效果。

案例效果：http://code.wubin.work/code/css/loading-four.html

loading-4

<span class="loader-4">Loading </span>

.loader-4 {
    font-size: 48px;
    letter-spacing: 2px;
    color: #FFF;
    animation: loader4 1s ease-in infinite alternate;
}
@-webkit-keyframes loader4 {
   0% {
     filter: blur(0px);
     transform: skew(0deg);
   }
   100% {
     filter: blur(3px);
     transform: skew(-4deg);
   }
 }

案例效果：http://code.wubin.work/code/css/loading-four.html