在這些情況下，我們一般會(huì)用到（加載）loading動(dòng)畫，提示于用戶頁面在加載中，這些UX常識(shí)我想很多設(shè)計(jì)師都懂。今天分享幾個(gè)僅用CSS3和SVG實(shí)現(xiàn)幾個(gè)loading動(dòng)畫效果。

Loaders.css

令人愉快的和注重性能的純CSS加載動(dòng)畫。

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

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

loading.io

通過SVG / CSS / GIF打造Ajax加載圖標(biāo)！

網(wǎng)址： http://loading.io/

spinkit

CSS加載動(dòng)畫集合。

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

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

收集的SVG Loading 動(dòng)畫

codepen中分享的幾個(gè)SVG loading 動(dòng)畫（加載有點(diǎn)慢）

幾個(gè)常用的SVG?loading 動(dòng)畫

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

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

更多l(xiāng)oading動(dòng)畫

網(wǎng)上搜索了一下，這里已經(jīng)收集了很多，我就不再收集了: https://codegeekz.com/best-css-svg-loaders-and-spinners/

?

===============以下是以前分享的網(wǎng)站內(nèi)容===============

現(xiàn)在 CSS3 越來越流行，CSS3 動(dòng)畫效果更是給開發(fā)者帶來了很多便利，我們可以很方便的使用 CSS3 和 JavaScript 來做出很酷炫的加載動(dòng)畫，推薦兩個(gè)css3 loading 動(dòng)畫集合。
1.一個(gè)是令人愉快的和表現(xiàn)力豐富的純CSS加載動(dòng)畫： https://connoratherton.com/loaders
2.Tim Holman在codepen.io上收集的css3 loading動(dòng)畫集合： http://codepen.io/collection/HtAne/

?