--- theme: smartblue --- ## 前言因为特效数量太多，所以我分成上、中、下三篇（每篇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) 这是我这几十年间从世界各地寻觅到的 **Loading特效**，合计117个（本文贴出第40-78个），而且是 **纯CSS** 制作的。
本文不讲解原理（以后可能会开新篇讲），只贴代码，大家来感受一下复制粘贴的快感吧。
**❤️❤️喜欢的给本文点个赞呗~**
[在线展示](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) ![cover02.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba176d6c499e469d8b45484da4b459cb~tplv-k3u1fbpfcp-watermark.image?)

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

```

## 41 ![041.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5d1b322d74d74c5f9a53854a46d9dc53~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 42 ![042.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6db0bfcb09724d1097e740e9996b7007~tplv-k3u1fbpfcp-watermark.image?) ```html

```

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

```

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

```

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

```

## 46 ![046.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92349d43ed2e41fc99a57ffa47b38af6~tplv-k3u1fbpfcp-watermark.image?) ```html

```

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

```

## 48 ![048.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2de1c2b3168543b08243853fb55ddbaf~tplv-k3u1fbpfcp-watermark.image?) ```html

```

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

```

## 50 ![050.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/61caf7d2ff5b4967ad0b7f707170024e~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 51 ![051.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2bd64508c6114324a19d3a1b1fa51989~tplv-k3u1fbpfcp-watermark.image?) ```html

```

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

```

## 53 ![053.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37f40bef6fcb49c09503211542aa41d5~tplv-k3u1fbpfcp-watermark.image?) ```html

```

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

```

## 55 ![055.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9918ff89f80248b3be79c2bcc18991bb~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 56 ![056.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5efd2d2657ec47939afae4d0216ae224~tplv-k3u1fbpfcp-watermark.image?) ```html

```

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

```

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

```

## 59 ![059.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/438ee183863d49b098ef1abc065b9710~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 60 ![060.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e5db23fa55e418c88fbc01bb9c4b91e~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 61 ![061.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3fac8cead0c248709d5534e873bb214f~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 62 ![062.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8480b11353614544ad4d7df00a962629~tplv-k3u1fbpfcp-watermark.image?) ```html

```

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

```

## 64 ![064.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/535224183eea4172a3966fe1b547ce25~tplv-k3u1fbpfcp-watermark.image?) ```html

```

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

```

## 66 ![066.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2effd0106883400aa749690102f7342c~tplv-k3u1fbpfcp-watermark.image?) ```html

```

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

```

## 68 ![068.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/66c4eb49326640209dfa8e97a49f3503~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 69 ![069.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/83688c8f71e440cebc9e3af0bdf997b6~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 70 ![070.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/57d62c3282aa485a9851f38ecd9c2c6c~tplv-k3u1fbpfcp-watermark.image?) ```html

```

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

```

## 72 ![072.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/01f500af1d4a404da9a4902f5c226f11~tplv-k3u1fbpfcp-watermark.image?) ```html

```

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

```

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

```

## 75 ![075.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/72ed08a8806844fe92bee8f16d55c6ec~tplv-k3u1fbpfcp-watermark.image?) ```html

```

## 76 ![076.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/451a6c1a15db4312a9a2666ef975e385~tplv-k3u1fbpfcp-watermark.image?) ```html

```

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

```

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

```