用gif图片来做loading的时代已经过去了，它显得太low了，而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足。这已经成为一种趋势。 这里收集了几十个用html5和css3实现的loading效果，以供学习参考。

    现在web技术不断发展，视图与数据渲染更多由前端呈现，后台更多与数据打交道。于是，我们会经常看到这样的交互场景。页面加载，看到一个框框里面有个菊花在转，然后内容呈现；或者点击个按钮，菊花在转，然后列表动态加载呈现。 确实，功能上OK，有菊花，用户也愿意等。但是，大家有没有觉得所有交互，出现菊花→出现内容，都是“砰砰砰”很生硬的感觉，尤其当内容是动态，高度不确定的时候。我们使用一些比较好的手机APP(如微信)的时候一定不会有这样的感觉，整个交互流程都是很流畅的，就像山涧的泉水，涓涓细流到山脚，而不是巨人在峡谷走路的感觉。 所以，如果菊花的呈现到内容的展示能够通过自然的动画过渡呈现，势必会增强用户体验。

    可用性研究表明，当响应时间超过一秒钟时，用户便能够有所察觉。虽然在反馈系统中，当用户需要等待时，更好的解决方案的是应该采用确定性的进度条。但对于一些耗时短，且用户的带宽为主要影响要素时，却使用Loading这种低成本实现的反馈。 Loading图标的历史来源已经无法考究(据传是苹果最先使用)，但是，它的动态效果，在视觉上刚好是一个重复循环的“风火轮”。非常适合做不确定等待时间的进度反馈。 Loading的主要作用，在于...