gif 画像で loading を作る時代は終わりました。それはあまりにもダサいです。一方、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/