第七频道

探索创新和消费
有料有趣的创业交流平台

HTML5+CSS3 loading 效果收集

用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


 

文/程序员之家(简书作者)
原文链接:http://www.jianshu.com/p/8ff4f83abdfa
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

 

未经允许不得转载:移动技术 > HTML5+CSS3 loading 效果收集

评论