用 gif 图片来做 loading 的时代已经过去了,它显得太 low 了,而用 HTML5/CSS3 以及 SVG 和 canvas 来做加载动画显得既炫酷又逼格十足。这已经成为一种趋势。
这里收集了几十个用 html5 和 css3 实现的 loading 效果,以供学习参考。
01. CSS Rainbow Loader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412765-2033-html5-css3-loaders-08.jpg)
演示 下载
02. Single element Slack loader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412765-1249-html5-css3-loaders-02.jpg)
演示 下载
03. Pure CSS3 loader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412765-6574-html5-css3-loaders-03.jpg)
演示 下载
04. CSS Cog loader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412766-5405-html5-css3-loaders-04.jpg)
演示 下载
05. VSCO – CSS loader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412766-3115-html5-css3-loaders-05.jpg)
演示 下载
06. Cube CSS Loader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412765-3113-html5-css3-loaders-06.jpg)
演示 下载
07. CSS Loader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412767-1471-html5-css3-loaders-07.jpg)
演示 下载
08. Tumblr-style cog loaders
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412766-4097-html5-css3-loaders-01.jpg)
演示 下载
09. CSS Weather Loader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412767-7416-html5-css3-loaders-09.jpg)
演示 下载
10. Chrome Cast CSS Loader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412767-2181-html5-css3-loaders-10.jpg)
演示 下载
11. CSS3 Loaders
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412767-8564-html5-css3-loaders-11.jpg)
演示 下载
12. Android 4.4 Kitkat loader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412767-6639-html5-css3-loaders-12.jpg)
演示 下载
13. CSS loaders kit
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412768-3539-html5-css3-loaders-13.jpg)
演示 下载
14. CSS creative loading
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412768-5102-html5-css3-loaders-14.jpg)
演示 下载
15. CSS Loading Animation
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412768-5360-html5-css3-loaders-15.jpg)
演示 下载
16. Logo Loader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412769-9766-html5-css3-loaders-16.jpg)
演示 下载
17. Loaders collection by Loaders.css
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412768-9638-html5-css3-loaders-17.jpg)
演示 下载
18. CSS Water filling Loader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412769-7603-html5-css3-loaders-18.jpg)
演示 下载
19. CSS loader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412769-4396-html5-css3-loaders-19.jpg)
演示 下载
20. Animated CSS3 Loading Bar
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412769-7567-html5-css3-loaders-20.jpg)
演示 下载
21. CSS loading text animation
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412770-4623-html5-css3-loaders-21.jpg)
演示 下载
22. Simple Loader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412770-7165-html5-css3-loaders-22.jpg)
演示 下载
23. CSS Loading animation
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412770-8164-html5-css3-loaders-23.jpg)
演示 下载
24. CSS loader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412770-8882-html5-css3-loaders-24.jpg)
演示 下载
25. Pushing pixels CSS loader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412771-3541-html5-css3-loaders-25.jpg)
演示 下载
26. CSS Loader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412771-9130-html5-css3-loaders-26.jpg)
演示 下载
27. CSS Loaders
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412772-4383-html5-css3-loaders-27.jpg)
演示 下载
28. Random Loader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412772-8723-html5-css3-loaders-28.jpg)
演示 下载
29. Single element CSS spinners
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412772-2334-html5-css3-loaders-29.jpg)
演示 下载
30. Simple CSS loader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412772-5303-html5-css3-loaders-30.jpg)
演示 下载
31. SpinKit – CSS loaders
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412773-5799-html5-css3-loaders-31.jpg)
演示 下载
32. Modern Google Loader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412773-8301-html5-css3-loaders-32.jpg)
演示 下载
33. 2D and 3D Block Loaders
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412773-8255-html5-css3-loaders-33.jpg)
演示 下载
34. 12 free SVG loaders
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412774-6290-html5-css3-loaders-34.jpg)
演示 下载
35. Page Loading Effects
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412775-7718-html5-css3-loaders-35.jpg)
演示 下载
36. Pace.js – Page Load Progress Bars
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412774-8024-html5-css3-loaders-36.jpg)
演示 下载
37. Loading SVG loaders
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412775-8776-html5-css3-loaders-37.jpg)
演示 下载
38. Material Design preloader
![纯HTML5和CSS3加载效果 纯HTML5和CSS3加载效果](http://www.runoob.com/wp-content/uploads/2016/04/1461412775-8830-html5-css3-loaders-38.jpg)
演示 下载