HTML5+CSS3 最酷的 loading 效果收集

浏览:205

用 gif 图片来做 loading 的时代已经过去了,它显得太 low 了,而用 HTML5/CSS3 以及 SVG 和 canvas 来做加载动画显得既炫酷又逼格十足。这已经成为一种趋势。





这里收集了几十个用 html5 和 css3 实现的 loading 效果,以供学习参考。





01. CSS Rainbow Loader





纯HTML5和CSS3加载效果





演示 下载





02. Single element Slack loader





纯HTML5和CSS3加载效果





演示 下载





03. Pure CSS3 loader





纯HTML5和CSS3加载效果





演示 下载





04. CSS Cog loader





纯HTML5和CSS3加载效果





演示 下载





05. VSCO – CSS loader





纯HTML5和CSS3加载效果





演示 下载





06. Cube CSS Loader





纯HTML5和CSS3加载效果





演示 下载





07. CSS Loader





纯HTML5和CSS3加载效果





演示 下载





08. Tumblr-style cog loaders





纯HTML5和CSS3加载效果





演示 下载





09. CSS Weather Loader





纯HTML5和CSS3加载效果





演示 下载





10. Chrome Cast CSS Loader





纯HTML5和CSS3加载效果





演示 下载





11. CSS3 Loaders





纯HTML5和CSS3加载效果





演示 下载





12. Android 4.4 Kitkat loader





纯HTML5和CSS3加载效果





演示 下载





13. CSS loaders kit





纯HTML5和CSS3加载效果





演示 下载





14. CSS creative loading





纯HTML5和CSS3加载效果





演示 下载





15. CSS Loading Animation





纯HTML5和CSS3加载效果





演示 下载





16. Logo Loader





纯HTML5和CSS3加载效果





演示 下载





17. Loaders collection by Loaders.css





纯HTML5和CSS3加载效果





演示 下载





18. CSS Water filling Loader





纯HTML5和CSS3加载效果





演示 下载





19. CSS loader





纯HTML5和CSS3加载效果





演示 下载





20. Animated CSS3 Loading Bar





纯HTML5和CSS3加载效果





演示 下载





21. CSS loading text animation





纯HTML5和CSS3加载效果





演示 下载





22. Simple Loader





纯HTML5和CSS3加载效果





演示 下载





23. CSS Loading animation





纯HTML5和CSS3加载效果





演示 下载





24. CSS loader





纯HTML5和CSS3加载效果





演示 下载





25. Pushing pixels CSS loader





纯HTML5和CSS3加载效果





演示 下载





26. CSS Loader





纯HTML5和CSS3加载效果





演示 下载





27. CSS Loaders





纯HTML5和CSS3加载效果





演示 下载





28. Random Loader





纯HTML5和CSS3加载效果





演示 下载





29. Single element CSS spinners





纯HTML5和CSS3加载效果





演示 下载





30. Simple CSS loader





纯HTML5和CSS3加载效果





演示 下载





31. SpinKit – CSS loaders





纯HTML5和CSS3加载效果





演示 下载





32. Modern Google Loader





纯HTML5和CSS3加载效果





演示 下载





33. 2D and 3D Block Loaders





纯HTML5和CSS3加载效果





演示 下载





34. 12 free SVG loaders





纯HTML5和CSS3加载效果





演示 下载





35. Page Loading Effects





纯HTML5和CSS3加载效果





演示 下载





36. Pace.js – Page Load Progress Bars





纯HTML5和CSS3加载效果





演示 下载





37. Loading SVG loaders





纯HTML5和CSS3加载效果





演示 下载





38. Material Design preloader





纯HTML5和CSS3加载效果





演示 下载





作者:神飞
原文:https://www.qianduan.net/free-html5-css3-loaders-preloaders/



top