来源 | https://www.jianshu.com/p/6d3aafe8240f
虽然互联网的连接速度已经变得越来越快,但是在登录一些网站时,难免会出现等待网页的加载的时候。 而设计师们也挖空心思的使用各种创意动画,让你的等待时间变得有趣,不至于很痛苦。
加载程序显示了进程正在运行。 然而,为了确保你在等待完成加载的过程前不会离开,加载程序的秘密就在于那些注意细节的有趣动画。
在本文中,你会发现 20 个很棒的加载动画,供你选择与参考。 同时,你可以将它们下载并使用在自己的网站或项目上。
1、CSS loader 源码地址:http://codepen.io/CKH4/pen/ZGNyep/
这是一个利用 Slim+CSS 预处理器 Stylus 实现的简单动画。 作者写代码很精炼、简洁。
源码地址: http://codepen.io/jackrugile/pen/JddmaX/
源码地址:http://codepen.io/mr_alien/pen/FDLjg/
作者: @mr_alien
为了将用户重新定向到另一个页面,而利用 HTML+CSS 实现的加载动画。
源码地址:http://codepen.io/mattiabericchia/pen/azNyBo/
源码地址:http://codepen.io/jackrugile/pen/BlDjk/
CSS+JS 实现的艳丽火花效果的 Canvas 加载动画。
源码地址:http://codepen.io/jonathansilva/pen/GhkAI/
源码地址: http://codepen.io/ispal/pen/mVaaJe/
源码地址: http://codepen.io/code_dependant/pen/bjFgq/
源码地址:http://codepen.io/majci23/pen/NqdXvy/
源码地址:http://codepen.io/FilipVitas/pen/aNLgZz/
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/
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/
17、One element four color loader 源码地址:http://codepen.io/tstoik/pen/Ywgxqb/
源码地址:http://codepen.io/samueljweb/pen/LbGxi/
源码地址:http://codepen.io/tomchewitt/pen/yNdQrO/
20、Another Loading Animation 源码地址:http://codepen.io/redouglas/pen/vCgwc/