11.06 20个加载动画特效，学前端的不容错过

随缘，喜欢勿错过，

愿能成为你的“干货助手”，

虽不能一起慢慢变老，但可以慢慢进步。

000

写在前面

文章2700+字，阅读全文预计8分钟，喜欢的可以帮忙分享一下，每天给大家带来不一样干货，快来和我一起慢慢。。。

今天我们翻的牌子是“前端”，文章不长，另外附上20张动画效果，每一个都有源码，需要的可以直接去看看，动画看起来超级棒，小编一个后端的肯定写不出这么优美的效果。

001

正文开始

前言

虽然互联网的连接速度已经变得越来越快，但是在登录一些网站时，难免会出现等待网页的加载的时候。而设计师们也挖空心思的使用各种创意动画，让你的等待时间变得有趣，不至于很痛苦。

加载程序显示了进程正在运行。然而，为了确保你在等待完成加载的过程前不会离开，加载程序的秘密就在于那些注意细节的有趣动画。在本文中，你会发现 20 个很棒的加载动画，供你选择与参考。同时，你可以将它们下载并使用在自己的网站或项目上。

一起来 Enjoy 吧！

译者注： 以下 20 个加载动画，均来自 CodePen.

1、CSS loader
源码地址：http://codepen.io/CKH4/pen/ZGNyep/

这是一个利用 Slim+CSS 预处理器 Stylus 实现的简单动画。作者写代码很精炼、简洁。

2、Rainbow Loader

源码地址：http://codepen.io/jackrugile/pen/JddmaX/

为客户端改良的纯 CSS 实现的彩虹加载动画。

3、Redirecting Loader

源码地址：http://codepen.io/mr_alien/pen/FDLjg/
作者：@mr_alien

为了将用户重新定向到另一个页面，而利用 HTML+CSS 实现的加载动画。

源码地址：http://codepen.io/mattiabericchia/pen/azNyBo/

作者：@mattiabericchia

纯 CSS 实现的循环加载动画。

5、Light Loader

源码地址：http://codepen.io/jackrugile/pen/BlDjk/

CSS+JS 实现的艳丽火花效果的 Canvas 加载动画。

6、CSS3 Infinite Loader

源码地址：http://codepen.io/jonathansilva/pen/GhkAI/

用 CSS3 和 Html 制作的无限加载动画。

7、CSS Stairs Loader

源码地址：http://codepen.io/ispal/pen/mVaaJe/

纯 CSS 实现的楼梯循环加载动画。

8、CSS Loader

源码地址：http://codepen.io/code_dependant/pen/bjFgq/

作者：@code_dependant

Haml+Sass 实现的循环加载动画。

9、Loader

源码地址：http://codepen.io/majci23/pen/NqdXvy/

纯 CSS 实现的循环加载动画。

10、Rubik loader

源码地址：http://codepen.io/FilipVitas/pen/aNLgZz/

HTML +Sass 实现的魔方加载动画。

11、CSS3 Loader Animation &ndash Peeek

源码地址：http://codepen.io/rss/pen/lKBaJ/

由 Mikael Edwards 设计并由 RızaSelçukSaydam 为 Peeek 开发的加载动画。利用 Haml + SCSS 实现的。

12、Pure Css Loader &ndash Square

源码地址：http://codepen.io/dghez/pen/Czuqn/

纯 SCSS 实现的正方形加载动画。

13、Cocktail Loader
源码地址：http://codepen.io/MarcMalignan/pen/svLux/

利用 CSS 与少量的 jQuery 实现的鸡尾酒加载动画。

14、Loader a Day (day 2)
源码地址：http://codepen.io/TheDutchCoder/pen/mgswv/

灵感启发！一个纯 CSS 实现的 iMac/iPad/iPhone 变换加载动画。

15、Polygon Loader
源码地址：http://codepen.io/dan_reid/pen/rwhDf/

受到 polygon.com 网站启发制作的加载动画，利用 Haml+SCSS 实现的。

16、Code Loader in CSS
源码地址：http://codepen.io/depy/pen/Gqtwv/

一款纯 CSS 加载动画，创意还是蛮有意思的。

17、One element four color loader

源码地址：http://codepen.io/tstoik/pen/Ywgxqb/

利用 SCSS 写的很酷的加载动画。

18、Loader #1

源码地址：http://codepen.io/samueljweb/pen/LbGxi/

利用棍状图形实现的加载动画。

19、Let’s load stuff

源码地址：http://codepen.io/tomchewitt/pen/yNdQrO/

纯 CSS 实现的有趣的加载动画。

20、Another Loading Animation

源码地址：http://codepen.io/redouglas/pen/vCgwc/

一个简单的旋转加载动画。

010

正文部分均引用下述文章，引用多篇的话，会有多个声明，无先后顺序。毕竟原创大佬不易，作为一个搬运工，渴望有朝一日也写出我的原创文。此外，文章在排版样式上可能与参考文章不符或小部分变动，请谅解。