纯CSS3实现各种loading效果

动画效果参考连接：你能相信吗？这些都是由一个DIV元素实现的动画，纯CSS3技术

效果如下：

以上这些效果都是用一个div加css3动画实现的，看起来效果似乎不错。如果不考虑IE9兼容性的话，有一定的使用价值。

css3，canvas等实现的各种炫酷动画可参考网站：https://www.html5tricks.com/tag/loading动画/

1.第一个动画的实现

我们来看一看第一个三条杠加载动画的实现代码

<style>
body{
  background: #56b4ab;
}
.loader,
.loader:before,
.loader:after {
  background: #FFF;
  /*
  * load1：执行的动画名
  * 1s：执行一秒
  * infinite：执行无限次
  * ease-in-out：动画以低速开始和结束
  */
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
}
.loader {
  text-indent: -9999em;
  margin: 40% auto;
  position: relative;
  font-size: 11px;
  /* 延时0.16s */
  animation-delay: 0.16s;
}
.loader:after {
  left: 1.5em;
  /* 延时0.32s */
  animation-delay: 0.32s;
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0 #FFF;
    height: 4em;
  }
  40% {
	/* 实现上部拉伸 */
    box-shadow: 0 -2em #ffffff;
	/* 实现下部拉伸 */
    height: 5em;
  }
}
</style>

<div class="loader">加载中...</div>

这里为了减少代码量，并没有做兼容性处理，一般我们需要在上述代码animation、animation-delay、keyframes前加入-webkit-等厂商前缀再写一次样式。

上面代码中宽高等都是用的em作为单位，这个的好处在于可以用font-size来控制其大小。

2.第二个动画的实现

body{
  background: #56b4ab;
}
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
}
.loader:before,
.loader:after {
  position: absolute;
  top: -0.1em;
  content: '';
  width: 5.2em;
  height: 10.2em;
  background: #56b4ab;
}
.loader {
  font-size: 11px;
  text-indent: -99999em;
  margin: 30% auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em #FFF;
}
.loader:before {
  border-radius: 10.2em 0 0 10.2em;
  left: -0.1em;
  /* 设置旋转元素的基点位置 */
  transform-origin: 5.2em 5.1em;
  /*
  * load2：执行的动画名
  * 2s：执行2秒
  * infinite：执行无限次 
  * 1.5s：延时1.5秒
  */
  animation: load2 2s infinite 1.5s;
}
.loader:after {
  border-radius: 0 10.2em 10.2em 0;
  left: 5.1em;
  transform-origin: 0px 5.1em;
  animation: load2 2s infinite;
}
@keyframes load2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

这个动画主要利用了旋转和颜色遮挡来实现动画效果。

3.第三个动画的实现

body{
  background: #56b4ab;
}
.loader {
  font-size: 10px;
  margin: 30% auto;
  text-indent: -9999em;
  width: 11em;
  height: 11em;
  border-radius: 50%;
  /* 线性渐变，从左到右，从白色到透明，0％代表起点和100％是终点 */
  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  position: relative;
  animation: load3 1.4s infinite linear;
}
.loader:before,
.loader:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}
.loader:before {
  width: 50%;
  height: 50%;
  background: #FFF;
  border-radius: 100% 0 0 0;
}
.loader:after {
  background: #56b4ab;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  margin: auto;
  bottom: 0;
  right: 0;
}
@keyframes load3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

实现：线性渐变+颜色遮挡+旋转

4.第四个动画的实现

body{
  background: #56b4ab;
}
.loader {
  font-size: 20px;
  margin: 45% auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  /* liner：规定以相同速度开始至结束的过渡效果*/
  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;
  }
}

这个动画效果看似有点难，其实技术实现比较简单，这里通过box-shadow来画8个圆形阴影，通过控制大小与显示隐藏，再配合css动画来实现

每次只显示三个圆：

然后配合css3动画，就达到了加载效果。

简单的loading动画

方式一： 

缺点：老的浏览器下，对 content 的动画不支持

<style>
  .loading {
    white-space: nowrap;
    display: inline-block;
    height: 14px;
    width: 22px;
    margin-left: 4px;
    position: relative;
  }
  .loading:after {
    content: '...'; /*兜底*/
    color: #3871ff;
    animation: dots 1.5s infinite;
    font-size: 26px;
    position: absolute;
    top: -12px;
    left: 0;
  }
  @keyframes dots {
    0%,
    100% {
      content: '...';
    }
    25% {
      content: '';
    }
    50% {
      content: '.';
    }
    75% {
      content: '..';
    }
  }
</style>


<div>加载中<span class="loading"></span></div>

方式二：（不推荐）

缺点：字符宽度受制于字体，例如移动端，没有宋体，字符可能就会被半路剪裁，从而出现显示bug

代码参考于：CSS3 animation渐进实现点点点等待提示效果

<style>
  .ani_dot {
    font-family: simsun;
    display: inline-block;
    width: 1.5em;
    vertical-align: bottom;
    overflow: hidden;
    animation: dot 3s infinite step-start;
  }
  @keyframes dot {
    0% {
      width: 0;
      margin-right: 1.5em;
    }
    33% {
      width: 0.5em;
      margin-right: 1em;
    }
    66% {
      width: 1em;
      margin-right: 0.5em;
    }
    100% {
      width: 1.5em;
      margin-right: 0;
    }
  }
</style>

<div>加载中<span class="ani_dot">...</span></div>

方式三：

缺点：IE10+以及FireFox浏览器下的点的边缘可能些虚（影响较小）

代码参考：再说CSS3 animation实现点点点loading动画

<style>
  .dotting {
    display: inline-block;
    min-width: 2px;
    min-height: 2px;
    /* 3个点 */
    box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor;
    animation: dot 4s infinite step-start both;
    /* step-start 让动画不连续 */
  }
  :root .dotting {
    margin-right: 8px;
  } /* 占据空间 */
  @keyframes dot {
    25% {
      /* 0个点 */
      box-shadow: none;
    }
    50% {
      /* 1个点 */
      box-shadow: 2px 0 currentColor;
    }
    75% {
      /* 2个点 */
      box-shadow: 2px 0 currentColor, 6px 0 currentColor;
    }
  }
</style>


<div>加载中<span class="dotting"></span></div>

方式四：

缺点：点点点没法设置为圆形

<style>
  .dotting {
    display: inline-block;
    width: 10px;
    min-height: 2px;
    margin-left: 2px;
    padding-left: 2px;
    padding-right: 2px;
    border-left: 2px solid currentColor;
    border-right: 2px solid currentColor;
    background-color: currentColor;
    background-clip: content-box;
    box-sizing: border-box;
    /* animation: dot 4s infinite step-start both; */
  }

  @keyframes dot {
    25% {
      border-color: transparent;
      background-color: transparent;
    } /* 0个点 */
    50% {
      border-right-color: transparent;
      background-color: transparent;
    } /* 1个点 */
    75% {
      border-right-color: transparent;
    } /* 2个点 */
  }
</style>

<div>加载中<span class="dotting"></span></div>