精选 20 个优质的加载动画
链接:https://zhuanlan.zhihu.com/p/24464355
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
虽然互联网的连接速度已经变得越来越快,但是在登录一些网站时,难免会出现等待网页的加载的时候。而设计师们也挖空心思的使用各种创意动画,让你的等待时间变得有趣,不至于很痛苦。
加载程序显示了进程正在运行。然而,为了确保你在等待完成加载的过程前不会离开,加载程序的秘密就在于那些注意细节的有趣动画。在本文中,你会发现 20 个很棒的加载动画,供你选择与参考。同时,你可以将它们下载并使用在自己的网站或项目上。
一起来 Enjoy 吧!
译者注: 以下 20 个加载动画,均来自 CodePen.
1. CSS loader
作者:@CKH4
![](https://pic4.zhimg.com/v2-d048608d543b55df997675195552f887_b.jpg)
2. Rainbow Loader
作者:@jackrugile
![](https://pic3.zhimg.com/v2-12c2232d899d7361fa39c36ce39406a2_b.jpg)
为客户端改良的纯 CSS 实现的彩虹加载动画。
3. Redirecting Loader
作者:@mr_alien
![](https://pic3.zhimg.com/v2-92e8a381136c7a143ba7d118b97ea2ce_b.jpg)
为了将用户重新定向到另一个页面,而利用 HTML+CSS 实现的加载动画。
4. Loader CSS
![](https://pic3.zhimg.com/v2-bcd26a12e3a85ebb7e6e7a4e69a32d12_b.jpg)
纯 CSS 实现的循环加载动画。
5. Light Loader
作者:@jackrugile
![](https://pic3.zhimg.com/v2-ee178202ff6d79271521195f57464dc6_b.jpg)
CSS+JS 实现的艳丽火花效果的 Canvas 加载动画。
6. CSS3 Infinite Loader
![](https://pic3.zhimg.com/v2-eb22c9e26cc52a25362f7f67842c1a16_b.jpg)
用 CSS3 和 Html 制作的无限加载动画。
7. CSS Stairs Loader
作者:@ispal
![](https://pic1.zhimg.com/v2-dbfc5dcd98fa85923b44656363b734b8_b.jpg)
纯 CSS 实现的楼梯循环加载动画。
8. CSS Loader
![](https://pic4.zhimg.com/v2-3d87393652603ef7fe30e0d17150141f_b.jpg)
9. Loader
作者:@majci23
![](https://pic4.zhimg.com/v2-4cffbab9fafe709f9057d6df349bab83_b.jpg)
纯 CSS 实现的循环加载动画。
10. Rubik loader
作者:@FilipVitas
![](https://pic3.zhimg.com/v2-80aaefc8253957dd810a3f70d9148eea_b.jpg)
11. CSS3 Loader Animation &ndash Peeek
作者:@rss
![](https://pic1.zhimg.com/v2-d8657bac6e8dfedf33d1b0fbd3ff1f9c_b.jpg)
由 Mikael Edwards 设计并由 RızaSelçukSaydam 为 Peeek 开发的加载动画。利用 Haml + SCSS 实现的。
12. Pure Css Loader &ndash Square
作者:@dghez
![](https://pic3.zhimg.com/v2-9dd92d60770386c66ba1a3c38be78cd2_b.jpg)
纯 SCSS 实现的正方形加载动画。
13. Cocktail Loader
![](https://pic2.zhimg.com/v2-4687096b09dfde0e8997f0d8198b9279_b.jpg)
利用 CSS 与少量的 jQuery 实现的鸡尾酒加载动画。
14. Loader a Day (day 2)
![](https://pic3.zhimg.com/v2-820316416e0ddc6abf153ece88939c9e_b.jpg)
灵感启发!一个纯 CSS 实现的 iMac/iPad/iPhone 变换加载动画。
15. Polygon Loader
作者:@dan_reid
![](https://pic2.zhimg.com/v2-2f53b7e8dfc02736b5fa0eda8e88df85_b.jpg)
受到 http://polygon.com 网站启发制作的加载动画,利用 Haml+SCSS 实现的。
16. Code Loader in CSS
作者:@depy
![](https://pic2.zhimg.com/v2-b267f3159b6b7a9d2b7bb083550597c9_b.jpg)
一款纯 CSS 加载动画,创意还是蛮有意思的。
17. One element four color loader
作者:@tstoik
![](https://pic3.zhimg.com/v2-0955edba460dd9a344c9bdcdbd5396fa_b.jpg)
利用 SCSS 写的很酷的加载动画。
18. Loader #1
作者:@samueljweb
![](https://pic4.zhimg.com/v2-63b2e0932df6c39a93c9081a822e40cb_b.jpg)
利用棍状图形实现的加载动画。
19. Let’s load stuff
作者:@tomchewitt
![](https://pic1.zhimg.com/v2-d5be3386999676124cd1dda3adfe3e38_b.jpg)
纯 CSS 实现的有趣的加载动画。
20. Another Loading Animation
作者:@redouglas
![](https://pic2.zhimg.com/v2-9959f01ee7b5df436d21a9a04ed2a2b9_b.jpg)
一个简单的旋转加载动画。
如果觉得文章不错,不妨点个赞。^_^