大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

今天给大家带来的主题是 CSS 加载器，在很多前端开发场景都离不开它，但是如果需要很多绚丽的效果往往又需要自行开发。而 css-loaders 项目提供了超过 500+ 的加载器，希望大家后续能够用得上。话不多说，直接进入正题！

什么是单元素 css-loaders

css-loaders 是使用 CSS 制作动画的加载旋转器的集合。

每个 spinner 都由一个带有 loader 的类和内容文本“正在加载...”的 div 组成。 该文本适用于屏幕阅读器，可用作旧版浏览器的打底状态。

css-loaders 项目的目的是创建一组最小负载旋转器，既具有视觉吸引力，又传达其预期含义。该项目严格限制每个加载器一个元素（不包括伪元素），因为相信像加载器这样简单的东西不值得、也不需要更多元素。

每个加载程序都有一个以像素为单位的字体大小，所有其他大小均以 em 为单位，因此要更改加载程序的大小，只需调整字体大小即可。

在浏览器兼容方面也比较优秀：

• IE 10+
• Chrome 4.0+
• Firefox 16.0+
• Opera 15.0+
• Safari 4.0+

目前 css-loaders 项目在Github上通过MIT协议开源，有超过7k的star、1.1k的fork、是一个值得关注和尝试的前端开源项目。

如何使用css-loaders

不管什么效果，首先都需要一个loading元素，可以通过div添加：

<span class="loader"></span>

洗衣机加载中效果

.loader {
  width: 120px;
  height: 150px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-image: linear-gradient(#ddd 50%, #bbb 51%),
    linear-gradient(#ddd, #ddd), linear-gradient(#ddd, #ddd),
    radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%),
    radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%),
    radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%);
  background-position: 0 20px, 45px 0, 8px 6px, 55px 3px, 75px 3px, 95px 3px;
  background-size: 100% 4px, 1px 23px, 30px 8px, 15px 15px, 15px 15px, 15px 15px;
  position: relative;
  border-radius: 6%;
  animation: shake 3s ease-in-out infinite;
  transform-origin: 60px 180px;
}
.loader:before {
  content: "";
  position: absolute;
  left: 5px;
  top: 100%;
  width: 7px;
  height: 5px;
  background: #aaa;
  border-radius: 0 0 4px 4px;
  box-shadow: 102px 0 #aaa;
}

.loader:after {
  content: "";
  position: absolute;
  width: 95px;
  height: 95px;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 20px;
  background-color: #bbdefb;
  background-image: 
    linear-gradient( to right, #0004 0%, #0004 49%, #0000 50%, #0000 100% ),
    linear-gradient(135deg, #64b5f6 50%, #607d8b 51%);
  background-size: 30px 100%, 90px 80px;
  border-radius: 50%;
  background-repeat: repeat, no-repeat;
  background-position: 0 0;
  box-sizing: border-box;
  border: 10px solid #DDD;
  box-shadow: 0 0 0 4px #999 inset, 0 0 6px 6px #0004 inset;
  animation: spin 3s ease-in-out infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg) }
  50% { transform: rotate(360deg) }
  75% { transform: rotate(750deg) }
  100% { transform: rotate(1800deg) }
}
@keyframes shake {
  65%, 80%, 88%, 96% { transform: rotate(0.5deg) }
  50%, 75%, 84%, 92% { transform: rotate(-0.5deg) }
  0%, 50%, 100%  { transform: rotate(0) }
}

效果如下：

更多Loading效果可以参考文末的官网，本文不再展开。

参考资料

https://github.com/lukehaas/css-loaders

https://cssloaders.github.io/