css3 loading（SVG loading）

在这些情况下，我们一般会用到（加载）loading动画，提示于用户页面在加载中，这些UX常识我想很多设计师都懂。今天分享几个仅用CSS3和SVG实现几个loading动画效果。

Loaders.css

令人愉快的和注重性能的纯CSS加载动画。

演示：https://connoratherton.com/loaders

Github：https://github.com/ConnorAtherton/loaders.css

loading.io

通过SVG / CSS / GIF打造Ajax加载图标！

网址：http://loading.io/

spinkit

CSS加载动画集合。

演示：http://tobiasahlin.com/spinkit/

Github：https://github.com/tobiasahlin/SpinKit

收集的SVG Loading 动画

codepen中分享的几个SVG loading 动画（加载有点慢）

class="wp-embedded-content" sandbox="allow-scripts" security="restricted" src="https://codepen.io/aurer/embed/preview/jEGbA?height=300&slug-hash=jEGbA&default-tab=result&host=http%3A%2F%2Fcodepen.io#?secret=9WrNo4Olm8" data-secret="9WrNo4Olm8" scrolling="no" frameborder="0" height="300" style="box-sizing: border-box; border-width: 0px; border-style: initial; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; max-width: 100%;">

几个常用的SVG loading 动画

演示：http://samherbert.net/svg-loaders/

Github：https://github.com/SamHerbert/SVG-Loaders