2015/02

25

SVGで作成されたローディングアイコンセット「SVG Loaders」

CSSやJavaScriptを使用しないで簡単に実装できる、SVGで作られたフラットデザインの超軽量ローディングインジケーター「SVG Loaders」を紹介します。
ローディングアニメーションを使いたい時に重宝しそうなSVGアイコンセット。スムーズなアニメーションで動くフラットなデザインが12種類あり、サイズやカラーの変更も簡単にできるので様々なケースで活用できそうです。

SVG Loaders

Githubに公開されてますのでSVG Loadersをダウンロードしてください。

使い方は簡単でimgタグにsvgファイルを指定するだけでOK。

html
<img src="svg-loaders/puff.svg" />

アイコンカラーを変更したい場合は、変更したいsvgファイルのfill属性を変更します。

svg
<svg fill="#fff" width="140" height="64" viewBox="0 0 140 64" xmlns="http://www.w3.org/2000/svg">

Advertisement

Advertisement

  • このSVGを僕のブログのローディング画面としているのですが、処理が重いようでかなりカクついています。

    対策として、雪を降らせるJavaScript(冬専用)をページ読み込み後に適用すると考えたのですが、うまくできず、どうすればいいのかと思いコメントさせていただきました。

    この中で最も軽い、や、重い、などの種類はあるのでしょうか?

    お返事いただけると大変嬉しいです。

人気記事
最新記事
Facebook