用 gif 图片来做 loading 的时代已经过去了,它显得太 low 了,而用 HTML5/CSS3 以及 SVG 和 canvas 来做加载动画显得既炫酷又逼格十足。这已经成为一种趋势。
这里收集了几十个用 html5 和 css3 实现的 loading 效果,以供学习参考。
01. CSS Rainbow Loader
演示 下载
02. Single element Slack loader
演示 下载
03. Pure CSS3 loader
演示 下载
04. CSS Cog loader
演示 下载
05. VSCO – CSS loader
演示 下载
06. Cube CSS Loader
演示 下载
07. CSS Loader
演示 下载
08. Tumblr-style cog loaders
演示 下载
09. CSS Weather Loader
演示 下载
10. Chrome Cast CSS Loader
演示 下载
11. CSS3 Loaders
演示 下载
12. Android 4.4 Kitkat loader
演示 下载
13. CSS loaders kit
演示 下载
14. CSS creative loading
演示 下载
15. CSS Loading Animation
演示 下载
16. Logo Loader
演示 下载
17. Loaders collection by Loaders.css
演示 下载
18. CSS Water filling Loader
演示 下载
19. CSS loader
演示 下载
20. Animated CSS3 Loading Bar
演示 下载
21. CSS loading text animation
演示 下载
22. Simple Loader
演示 下载
23. CSS Loading animation
演示 下载
24. CSS loader
演示 下载
25. Pushing pixels CSS loader
演示 下载
26. CSS Loader
演示 下载
27. CSS Loaders
演示 下载
28. Random Loader
演示 下载
29. Single element CSS spinners
演示 下载
30. Simple CSS loader
演示 下载
31. SpinKit – CSS loaders
演示 下载
32. Modern Google Loader
演示 下载
33. 2D and 3D Block Loaders
演示 下载
34. 12 free SVG loaders
演示 下载
35. Page Loading Effects
演示 下载
36. Pace.js – Page Load Progress Bars
演示 下载
37. Loading SVG loaders
演示 下载
38. Material Design preloader
演示 下载
作者:神飞
原文:https://www.qianduan.net/free-html5-css3-loaders-preloaders/