用 gif 图片来做 loading 的时代已经过去了，它显得太 low 了，而用 HTML5/CSS3 以及 SVG 和 canvas 来做加载动画显得既炫酷又逼格十足。这已经成为一种趋势。
这里收集了几十个用 html5 和 css3 实现的 loading 效果，以供学习参考。
### 01\. CSS Rainbow Loader
[演示](http://codepen.io/jackrugile/full/JddmaX) [下载](http://codepen.io/jackrugile/share/zip/JddmaX)
### 02\. Single element Slack loader
[演示](http://codepen.io/CrocoDillon/full/Htycs) [下载](http://codepen.io/CrocoDillon/share/zip/Htycs)
### 03\. Pure CSS3 loader
[演示](http://cssdeck.com/labs/full/loader) [下载](http://cssdeck.com/labs/loader)
### 04\. CSS Cog loader
[演示](http://codepen.io/jcoulterdesign/full/bNxeKY) [下载](http://codepen.io/jcoulterdesign/share/zip/bNxeKY)
### 05\. VSCO – CSS loader
[演示](http://codepen.io/hynden/full/nyblr) [下载](http://codepen.io/hynden/share/zip/nyblr)
### 06\. Cube CSS Loader
[演示](http://codepen.io/Vestride/full/vHzyk) [下载](http://codepen.io/Vestride/share/zip/vHzyk)
### 07\. CSS Loader
[演示](http://codepen.io/mattiabericchia/full/azNyBo) [下载](http://codepen.io/mattiabericchia/share/zip/azNyBo)
### 08\. Tumblr-style cog loaders
[演示](http://pasqualevitiello.github.io/Tumblr-Style-Cog-Spinners/) [下载](http://freebiesbug.com/download/Tumblr-Style-Cog-Spinners.zip)
### 09\. CSS Weather Loader
[演示](http://codepen.io/tholman/full/yenku) [下载](http://codepen.io/tholman/share/zip/yenku)
### 10\. Chrome Cast CSS Loader
[演示](http://codepen.io/bronsrobin/full/LlyBK) [下载](http://codepen.io/bronsrobin/share/zip/LlyBK)
### 11\. CSS3 Loaders
[演示](http://codepen.io/Siddharth11/full/xbGrpG) [下载](http://codepen.io/Siddharth11/share/zip/xbGrpG)
### 12\. Android 4.4 Kitkat loader
[演示](http://codepen.io/simoncla/full/EibKC) [下载](http://codepen.io/simoncla/share/zip/EibKC)
### 13\. CSS loaders kit
[演示](http://codepen.io/viduthalai1947/full/JkhDK) [下载](http://codepen.io/viduthalai1947/share/zip/JkhDK)
### 14\. CSS creative loading
[演示](http://tympanus.net/Development/CreativeLoadingEffects/) [下载](http://tympanus.net/Development/CreativeLoadingEffects/CreativeLoadingEffects.zip)
### 15\. CSS Loading Animation
[演示](http://tympanus.net/Tutorials/LoadingAnimations/) [下载](http://tympanus.net/Tutorials/LoadingAnimations/LoadingAnimations.zip)
### 16\. Logo Loader
[演示](http://cssdeck.com/labs/full/logo-loader) [下载](http://cssdeck.com/labs/logo-loader)
### 17\. Loaders collection by Loaders.css
[演示](https://connoratherton.com/loaders) [下载](https://github.com/ConnorAtherton/loaders.css)
### 18\. CSS Water filling Loader
[演示](http://codepen.io/lbebber/full/xrwja) [下载](http://codepen.io/lbebber/share/zip/xrwja)
### 19\. CSS loader
[演示](http://codepen.io/jshawl/full/IFxBK) [下载](http://codepen.io/jshawl/share/zip/IFxBK)
### 20\. Animated CSS3 Loading Bar
[演示](http://www.cssflow.com/snippets/animated-progress-bar/demo) [下载](http://www.cssflow.com/snippets/animated-progress-bar.zip)
### 21\. CSS loading text animation
[演示](http://dabblet.com/gist/6046779) [下载](http://dabblet.com/gist/6046779)
### 22\. Simple Loader
[演示](http://cssdeck.com/labs/full/one-div-simple-loader) [下载](http://cssdeck.com/labs/one-div-simple-loader)
### 23\. CSS Loading animation
[演示](http://codepen.io/austinmzach/full/wxrAj) [下载](http://codepen.io/austinmzach/share/zip/wxrAj)
### 24\. CSS loader
[演示](http://codepen.io/CKH4/full/ZGNyep) [下载](http://codepen.io/CKH4/share/zip/ZGNyep)
### 25\. Pushing pixels CSS loader
[演示](http://codepen.io/redlabor/full/idHeG) [下载](http://codepen.io/redlabor/share/zip/idHeG)
### 26\. CSS Loader
[演示](http://codepen.io/CreativeJuiz/full/vFBIh) [下载](http://codepen.io/CreativeJuiz/share/zip/vFBIh)
### 27\. CSS Loaders
[演示](http://codepen.io/TaniaLD/full/oKxep) [下载](http://codepen.io/TaniaLD/share/zip/oKxep)
### 28\. Random Loader
[演示](http://codepen.io/mr_alien/full/synHB) [下载](http://codepen.io/mr_alien/share/zip/synHB)
### 29\. Single element CSS spinners
[演示](http://projects.lukehaas.me/css-loaders/) [下载](https://github.com/lukehaas/css-loaders)
### 30\. Simple CSS loader
[演示](http://codepen.io/preeteshjain/full/KpvygJ) [下载](http://codepen.io/preeteshjain/share/zip/KpvygJ)
### 31\. SpinKit – CSS loaders
[演示](http://tobiasahlin.com/spinkit/) [下载](https://github.com/tobiasahlin/SpinKit)
### 32\. Modern Google Loader
[演示](http://codepen.io/jczimm/full/vEBpoL) [下载](http://codepen.io/jczimm/share/zip/vEBpoL)
### 33\. 2D and 3D Block Loaders
[演示](http://codepen.io/ashleynolan/full/owvcl) [下载](http://codepen.io/ashleynolan/share/zip/owvcl)
### 34\. 12 free SVG loaders
[演示](http://samherbert.net/svg-loaders/) [下载](https://github.com/SamHerbert/SVG-Loaders)
### 35\. Page Loading Effects
[演示](http://tympanus.net/Development/PageLoadingEffects/) [下载](http://tympanus.net/Development/PageLoadingEffects/PageLoadingEffects.zip)
### 36\. Pace.js – Page Load Progress Bars
[演示](http://github.hubspot.com/pace/docs/welcome/) [下载](https://github.com/HubSpot/pace)
### 37\. Loading SVG loaders
[演示](http://jxnblk.com/loading/) [下载](https://github.com/jxnblk/loading)
### 38\. Material Design preloader
[演示](http://jquerycards.com/ui/loading/material-preloader/) [下载](https://github.com/aarondo/Material-Preloader)
作者：神飞
原文：https://www.qianduan.net/free-html5-css3-loaders-preloaders/