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">

  • SVGボタンに様々なエフェクトを実装できる「Distorted Button Effects」
  • JPG・PNG・GIF・SVGの画像を圧縮してくれるWebサービス「Compressor.io」
  • シンプルなチャートを実装できるライブラリ「Frappé Charts」
  • アプリアイコンをデザインするときに参考にしたいサイトまとめ
  • 420種類のシンプルなアイコンセット「Evericons」
RELATED POSTS
  • さまざまなスタイルのCSSボタンをコレクションした「Buttons」
  • アイコンフォント「FontAwesome」の使い方
  • 【html】文字実体参照を一覧できる「html arrows」
  • 【CSS】CSSだけで作られた簡単に使えるアイコンセット
  • 軽快なアニメーションのバーガーメニュー「Ember Burger Menu」
  • 簡単にホバーエフェクトを実装できるCSSライブラリ「Izmir Hover Effects」
RECENT POSTS
  • 背景や区切り線などを簡単に装飾できるCSSライブラリ「pattern.css」
  • セクションの区切りをデザインできる「CSS Section Separator Generator」
  • 動画やアニメーションgifの背景を自動で消去してくれる「Unscreen」
  • ポップなイラストをダウンロードできる「Download 80 free illustrations」
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2020年3月版】
  • パーツを組み合わせてイラストを作成できる「Open Peeps」
  • 無料で使用できるポップなフリーイラスト「illlustrations」
  • 宮崎県小林市が提供するお肉のフリー素材サイト「oniku images」