HTML5+CSS3 loading 效果收集
浏览:3008次 出处信息
用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
Other Loaders and Preloaders
34. 12 free SVG loaders
35. Page Loading Effects
36. Pace.js - Page Load Progress Bars
37. Loading SVG loaders
38. Material Design preloader
整理自:instantshift
建议继续学习:
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:CSS中的margin外边距折叠现象
后一篇:基于原生HTML的UI组件开发 >>
文章信息
- 作者:神飞 来源: 前端观察
- 标签: loading
- 发布时间:2016-01-26 23:42:52
近3天十大热文
- [59] Go Reflect 性能
- [13] 系统工程师的自我修养- sed篇
- [12] 公钥私钥加密解密数字证书数字签名详解
- [12] iOS可视化编程 Tips 之“无需代码设置
- [11] 浅谈Web安全验证码
- [11] osx平台上lol英雄联盟launcher启
- [11] iTerm2 (Mac Terminal)
- [11] 正态分布的前世今生(一)
- [11] 基于HTTP缓存轻松实现客户端应用的离线支持
- [10] 最萌域名.cat背后的故事:加泰与西班牙政府