单元素实现的加载进度提示效果

 

效果一：

　　实现：（1）用before与after将前后的竖条生成

　　　　　（2）动画的设计：增加其元素的长度（向下伸长），对元素加上不同的时延，反向增加阴影的长度（向上伸长）

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

body {
  background: #0dcecb;
  color: #FFF;
}
.load_div{
    width: 200px;
    height: 200px;
    border: 2px #fe7302 solid;
    position: relative;
}
.load:before, .load:after, .load{
  -webkit-animation:load1 1s infinite ease-in-out;
  animation:load1 1s infinite ease-in-out;
  width: 15px;
  height: 70px;
}
.load{
    width: 15px;
    height: 70px;
    background: #eee;
    margin: 50px auto;
    -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
}
.load:before, .load:after{
    position: absolute;
    content: '';
    background: #eee;
}
.load:before{
    left: 70px;
    -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.load:after{
    left: 116px;
    -webkit-animation-delay:2s;
    animation-delay:2s;
}
@-webkit-keyframes load1{
    0%,
    80%,
    100%{
        box-shadow: 0 0 #eee;
        height: 80px;
    }
    40%{
        box-shadow: 0 -2em #eee;
        height: 100px
    }
}

 

效果二：

　　实现：（1）中间是.load元素设背景色与网页的背景色一致，设置白色内阴影

　　　　   （2）：before与：after分别是2个半圆，颜色与背景一致。不动的时候与.load元素重合的，设置旋转的动画，过程其实就是2个半圆不断的旋转，显示。load元素的内阴影的过程

.load2 .loader,
.load2 .loader:before,
.load2 .loader:after{
  border-radius: 50%;
}
.load2 .loader:before,
.load2 .loader:after{
  width: 100px;
  height: 200px;
  position: absolute;
  content: '';
}
.load2 .loader{
  width: 200px;
  height: 200px;
  position: relative;
  box-shadow: inset 0 0 0 10px #fff;
}
.load2 .loader:before{
  background: #0dcecb;
  border-radius: 200px 0 0 200px;
  -webkit-transform-origin: 100px 100px;
  transform-origin: 100px 100px;
  -webkit-animation:load2 2s infinite ease 1.5s;
  animation:load2 2s infinite ease 1.5s;
}
.load2 .loader:after{
  left: 100px;
  background: #0dcecb;
  border-radius: 0 200px 200px 0;
  -webkit-transform-origin: 0px 100px;
  transform-origin: 0px 100px;
  -webkit-animation:load2 2s infinite ease;
  animation:load2 2s infinite ease;
}
@-webkit-keyframes load2 {
  0%{
    -webkit-transform: rotate(0deg);transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(360deg);transform: rotate(360deg);
  }
}
@keyframes load2 {
  0%{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
body {
  font-size: 62.5%;
  font-family: 'Lato', sans-serif;
  background: #0dcecb;
  color: #FFF;
}

效果三：

　　实现：（1）.load元素是一个大圆，背景颜色从左到右渐变的颜色。:after元素是一个同圆心的，稍微小一点的园。

　　　　　（2）：before元素是四分一圆，动画是给.load元素加旋转，由于定位的关系，before元素会随着其旋转。

body {
  font-size: 62.5%;
  font-family: 'Lato', sans-serif;
  background: #0dcecb;
  color: #FFF;
}

@-webkit-keyframes load3{
  0%{
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  100%{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}

.load .loader:before,
.load .loader:after,
.load .loader{
  border-radius: 50%;
}

.load .loader{
  width: 100px;
  height: 100px;
  -webkit-animation:load3 1.4s infinite linear;
  animation:load3 1.4s infinite linear;
  background: red;
  position: relative;
  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: linear-gradient(to right,#fff 10%,rgba(255,255,255,0)42%)
}

.load .loader:before{
  content: '';
  position: absolute;
  background: #FFF;
  width: 50%;
  height: 50%;
  border-radius: 100% 0 0 0;
  top:0;
  left: 0;
}

.load .loader:after{
  position: absolute;
  width: 80%;
  height: 80%;
  content: '';
  background: #0dcecb;
  top:10%;
  left: 10%;
}

 

效果四：

　　实现：其实div就是一个小小的圆，在旋转的圆点的圆心。通过设置周围包围的阴影来实现效果，动画是改变这外围的阴影的大小来实现的。主要是需要控制好点的位置与点的大小变换

.load4 .loader {
  font-size: 20px;
  margin: 5em auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
}
@keyframes load4 {
  0%,
  100% {
    box-shadow: 0em -3em 0em 0.2em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 0em #ffffff;
  }
  12.5% {
    box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 0.2em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  25% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 0em #ffffff, 3em 0em 0 0.2em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  37.5% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 0em #ffffff, 2em 2em 0 0.2em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 -0.5em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  50% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 0em #ffffff, 0em 3em 0 0.2em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 -0.5em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  62.5% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 0em #ffffff, -2em 2em 0 0.2em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 -0.5em #ffffff;
  }
  75% {
    box-shadow: 0em -3em 0em -0.5em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0.2em #ffffff, -2em -2em 0 0em #ffffff;
  }
  87.5% {
    box-shadow: 0em -3em 0em 0em #ffffff, 2em -2em 0 -0.5em #ffffff, 3em 0em 0 -0.5em #ffffff, 2em 2em 0 -0.5em #ffffff, 0em 3em 0 -0.5em #ffffff, -2em 2em 0 0em #ffffff, -3em 0em 0 0em #ffffff, -2em -2em 0 0.2em #ffffff;
  }
}

 

效果5：跟4差不多，改变的是透明度

.load .loader {
  margin: 4em auto;
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}

 

效果6-8与上面的效果大同小异，代码就不po了~