分享一些Loading画面源码~

别具创意的HTML5+CSS3 loading加载动画效果

摘要: 过去HTML5还未盛行开来，多数网站的loading动画采用GIF制作，如今看起来已经显得low了，而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足。本文整理了几十个HTML5和CSS3实现的loading动画效果。 ... ...

在这个互联网信息风靡时代，各网站无论在用户体验还是UI设计方面，都想尽办法夺取用户青睐，大到网页整体布局，小到加载缓存，都紧密影响着用户的来去。过去HTML5还未盛行开来，多数网站的loading动画采用GIF制作，如今看起来已经显得low了，而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足。这已经成为一种趋势。 　　本文共收集整理了几十个基于HTML5和CSS3实现的loading动画效果，希望能为今后的开发派上用场，大家按需索取。 　　01. CSS Rainbow Loader 　　Demo      Download 　　02. Single element Slack loader 　　Demo     Download 　　03. Pure CSS3 loader 　　Demo     Download 　　04. CSS Cog loader 　　Demo    Download 　　05. VSCO – CSS loader 　　Demo      Download 　　06. Cube CSS Loader 　　Demo    Download 　　07. CSS Loader 　　Demo     Download 　　08. Tumblr-style cog loaders 　　Demo     Download 　　09. CSS Weather Loader 　　Demo      Download 　　10. Chrome Cast CSS Loader 　　Demo      Download 　　11. CSS3 Loaders 　　Demo     Download 　　12. Android 4.4 Kitkat loader 　　Demo     Download 　　13. CSS loaders kit 　　Demo     Download 　　14. CSS creative loading 　　Demo    Download 　　15. CSS Loading Animation 　　Demo     Download 　　16. Logo Loader 　　Demo     Download 　　17. Loaders collection by Loaders.css 　　Demo      Download 　　18. CSS Water filling Loader 　　Demo     Download 　　19. CSS loader 　　Demo      Download 　　20. Animated CSS3 Loading Bar 　　Demo     Download 　　21. CSS loading text animation 　　Demo     Download 　　22. Simple Loader 　　Demo     Download 　　23. CSS Loading animation 　　Demo    Download 　　24. CSS loader 　　Demo      Download 　　25. Pushing pixels CSS loader 　　Demo     Download 　　26. CSS Loader 　　Demo     Download 　　27. CSS Loaders 　　Demo     Download 　　28. Random Loader 　　Demo     Download 　　29. Single element CSS spinners 　　Demo     Download 　　30. Simple CSS loader 　　Demo     Download 　　31. SpinKit – CSS loaders 　　Demo     Download 　　32. Modern Google Loader 　　Demo     Download 　　33. 2D and 3D Block Loaders 　　Demo     Download 　　Other Loaders and Preloaders 　　34. 12 free SVG loaders 　　Demo     Download 　　35. Page Loading Effects 　　Demo     Download 　　36. Pace.js – Page Load Progress Bars 　　Demo      Download 　　37. Loading SVG loaders 　　Demo      Download 　　38. Material Design preloader 　　Demo      Download 　　 整理自： instantshift 　　 来源：前端观察

转载于:https://my.oschina.net/moketsz/blog/611810