JavaScriptとCSSは不要!SVGの気持ちいいアニメーションで作られた超軽量のかわいいローディング -SVG Loaders

JavaScriptもCSSも画像も使用せず、SVGで実装された軽快で気持ちいいアニメーションで動くローディングのアイコンを紹介します。

ページに実装する時もJavaScript/CSSは必要ありません。簡単なHTMLでOK!

デモのアニメーション

SVG Loaders -GitHub

SVG Loadersのデモ

デモは全部で12種類のローダーがあり、SVGなのでサイズやカラーなども簡単に変更して利用できます。

デモのアニメーション

デモページ

SVG Loadersの使い方

使い方は、簡単!

Step 1: SVGファイルをダウンロード

下記ページの右サイドの「Downlaod ZIP」から、SVGファイルをダウンロードします。

Step 2: HTML

あとは、imgタグで配置するだけです。

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

アイコンのカラーを変更したい時は、svg要素のfill属性を変更します。

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

SVGアニメーションの各ブラウザのサポート

サイトのキャプチャ

SVGアニメーションのサポート状況

top of page

©2017 coliss