--- theme: smartblue --- ## 前言这是我这几十年间从世界各地寻觅到的 **Loading特效**，合计117个（本文贴出第1-39个），而且是 **纯CSS** 制作的。因为特效数量太多，所以我分成上、中、下三篇（每篇39个特效）。 [《纯css实现117个Loading效果（上）》](https://juejin.cn/post/7037036742985121800) [《纯css实现117个Loading效果（中）》](https://juejin.cn/post/7037636080539009038) [《纯css实现117个Loading效果（下）》](https://juejin.cn/post/7037660617779445796) 本文不讲解原理（以后可能会开新篇讲），只贴代码，大家来感受一下复制粘贴的快感吧。
**❤️❤️喜欢的给本文点个赞呗~**
[🐱‍💻在线展示](http://k21vin.gitee.io/front-end-data-visualization/#/native/pureCSS/loading) [🐱‍👓仓库代码 Star一下吧](https://gitee.com/k21vin/front-end-data-visualization/tree/master/src/views/Native/PureCSS/pages/Loading/components)
![cover01.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20b565fea8304b91ac7b4c3325851bc3~tplv-k3u1fbpfcp-watermark.image?)

## 1 ![001.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/723d9a5b23d94f3a8e116c9fdb6cbe74~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 2 ![002.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f5644a483764414992b4c52dd52b4fd9~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 3 ![003.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4374f34386dc40aa83bb3d8b043cd306~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 4 ![004.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/560569179e3545eb9c6bdd6e55497cde~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 5 ![005.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b805c7d8d8f41039ac602516a2d9b80~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 6 ![006.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d7e4ef61ca24a97a4cf128e3c0b2a04~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 7 ![007.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c3b6ac4dd62e4fc99345422804290839~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 8 ![008.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/35721dc68d914d329a7e40b3152ecc34~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 9 ![009.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/941d83ef28f743d2a38deebdbc174807~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 10 ![010.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ea3d1041c2e43fea808624126546142~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 11 ![011.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0b816c18435446178e854a6356b40ded~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 12 ![012.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0f250c1d6ee548c789d27689cfba91d3~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 13 ![013.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b7362a11fa884f798e78f16dfdd199ae~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 14 ![014.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dc83436385a14725898adecb49c9d0c7~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 15 ![015.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/80dcb18c563e489b81ce0b17b3044b1b~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 16 ![016.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/82832138565d4b1398c62a408f2cf05e~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 17 ![017.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c6fad3b1f2c940e988bb326ce1ac4c46~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 18 ![018.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/16efa3697d544820af0ae4bddadd3e29~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 19 ![019.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/528f606b3a284d4095d1cd5509f35e35~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 20 ![020.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c3923212801a401fabe11d6f04cd3e4a~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 21 ![021.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bee5ff9a582e43c8ba0e7859184b3aa2~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 22 ![022.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5767538abca348518e4a51e2f8a7d919~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 23 ![023.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7aa295b574f54f09be554b3ab8eb48c2~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 24 ![024.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c91a079d8c64f5ca7f5bfa306390977~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 25 ![025.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e793c1574404dc4bacd13553cc5c3bc~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 26 ![026.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4001f8abc6874a55aca35a6d0df7c832~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 27 ![027.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8bfb418b908e4ec9b8926eb4aa6fda6e~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 28 ![028.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/db8dc80f85f14702ae5688e4cc044cb5~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 29 ![029.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f3f19ddb96f74ad295a709e79c4f4c7a~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 30 ![030.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc01e9b49dc044339fb5ad709bdfd4ac~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 31 ![031.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/240bcd61d6b64632af81be788d24f2e4~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 32 ![032.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6cec90f613544226824f0cb0fc6acf39~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 33 ![033.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0bef0212cf5d43bfb43832657c7d2f75~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 34 ![034.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ae75f71bd55b485ea0483b58e86e0575~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 35 ![035.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3466590ee12d461f98b656952cc6fb7d~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 36 ![036.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7f8dd8b8bbd240eba40a0c046efc0e18~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 37 ![037.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b3d673bf30064df4b19fc627e57020df~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 38 ![038.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/427b41f24a554e34909ed125a2af1b78~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 39 ![039.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ecb1c9cf428a4697b4211af4838a2950~tplv-k3u1fbpfcp-watermark.image?) ```html

```

--- # 更多推荐 [《Fabric.js 从入门到精通》](https://juejin.cn/post/7026941253845516324) [《纯CSS实现『斑马纹理投影文字』》](https://juejin.cn/post/7009637424611491848) [《console.log也能插图！！！》](https://juejin.cn/post/6913554505841770509) [《给console来的样式》](https://juejin.cn/post/6911337056678379534)