在這些情況下,我們一般會用到(加載)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加載圖標!
spinkit
CSS加載動畫集合。
演示: http://tobiasahlin.com/spinkit/
Github: https://github.com/tobiasahlin/SpinKit
收集的SVG Loading 動畫
codepen中分享的幾個SVG loading 動畫(加載有點慢)
幾個常用的SVG?loading 動畫
演示: http://samherbert.net/svg-loaders/
Github: https://github.com/SamHerbert/SVG-Loaders
更多loading動畫
網上搜索了一下,這里已經收集了很多,我就不再收集了: https://codegeekz.com/best-css-svg-loaders-and-spinners/
?
===============以下是以前分享的網站內容===============
現在 CSS3 越來越流行,CSS3 動畫效果更是給開發者帶來了很多便利,我們可以很方便的使用 CSS3 和 JavaScript 來做出很酷炫的加載動畫,推薦兩個css3 loading 動畫集合。
1.一個是令人愉快的和表現力豐富的純CSS加載動畫:
https://connoratherton.com/loaders
2.Tim Holman在codepen.io上收集的css3 loading動畫集合:
http://codepen.io/collection/HtAne/
?