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

34. 12 free SVG loaders

35. Page Loading Effects

36. Pace.js – Page Load Progress Bars

37. Loading SVG loaders

38. Material Design preloader

页面卡死，还是在页面内容或者代码上去解决。即使加了loading，页面卡死后，loading代码本身也会出现假死的。

除了加loading外，最重要的还是解决假死的问题。

参考以下loading代码：

<style>

.loading{

            width: 80px

            height: 40px

            margin: 0 auto

            margin-top:100px

        }

        .loading span{

            display: inline-block

            width: 8px

            height: 100%

            border-radius: 4px

            background: lightgreen

            -webkit-animation: load 1s ease infinite

        }

        @-webkit-keyframes load{

            0%,100%{

                height: 40px

                background: lightgreen

            }

            50%{

                height: 70px

                margin: -15px 0

                background: lightblue

            }

        }

        .loading span:nth-child(2){

            -webkit-animation-delay:0.2s

        }

        .loading span:nth-child(3){

            -webkit-animation-delay:0.4s

        }

        .loading span:nth-child(4){

            -webkit-animation-delay:0.6s

        }

        .loading span:nth-child(5){

            -webkit-animation-delay:0.8s

        }

</style>

<div class="loading">

        <span></span>

        <span></span>

        <span></span>

        <span></span>

        <span></span>

</div>

---