La era de usar imágenes GIF para hacer loading ya pasó, porque se ve demasiado "low"; en cambio, usar HTML5/CSS3, SVG y canvas para crear animaciones de carga resulta genial y con mucho estilo. Esto ya se ha convertido en una tendencia.
Aquí se han recopilado decenas de efectos de loading implementados con HTML5 y CSS3, como referencia para el aprendizaje.
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

Demo Descargar
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

Demo Descargar
15. CSS Loading Animation

Demo Descargar
16. Logo Loader

17. Loaders collection by Loaders.css

18. CSS Water filling Loader

19. CSS loader

20. Animated CSS3 Loading Bar

Demo Descargar
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

34. 12 free SVG loaders

35. Page Loading Effects

Demo Descargar
36. Pace.js – Page Load Progress Bars

37. Loading SVG loaders

38. Material Design preloader

Autor: Shen Fei
Artículo original: https://www.qianduan.net/free-html5-css3-loaders-preloaders/