以前までローディングを使う時、gif画像をよく使用していたのですが、最近はcssやsvgでローディングの実装をしているサイトを良く見かけます。過去に参考にさせてもらったものや今度使いたいと思ったのでcodepenで公開されている実装方法のまとめです。
レインボーくるくる
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”hItqn” default_tab=”css,result” user=”patrikhjelm”]See the Pen <a href=’https://codepen.io/patrikhjelm/pen/hItqn/’>CSS loading animation</a> by Patrik Hjelm (<a href=’https://codepen.io/patrikhjelm’>@patrikhjelm</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
存在感のあるローディングです。
カラフルなボール
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”AbBtc” default_tab=”css,result” user=”hafizfattah”]See the Pen <a href=’https://codepen.io/hafizfattah/pen/AbBtc/’>loading animation</a> by hafiz fattah (<a href=’https://codepen.io/hafizfattah’>@hafizfattah</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
色使いもおしゃれで動きもカワイイ。
シャープなローディング
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”xbQJom” default_tab=”css,result” user=”martinvd”]See the Pen <a href=’https://codepen.io/martinvd/pen/xbQJom/’>CSS loading animation 12</a> by Martin van Driel (<a href=’https://codepen.io/martinvd’>@martinvd</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
立体感があっていい意味で尖ったローディング。
波打つような爽やかさ
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”pKtmu” default_tab=”css,result” user=”Smudded”]See the Pen <a href=’https://codepen.io/Smudded/pen/pKtmu/’>Grooveshark Loading Ideas.</a> by William Richardson (<a href=’https://codepen.io/Smudded’>@Smudded</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
企業のロゴなんかを使用してもいいですね。
フェードするローディングテキスト
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”bVMzze” default_tab=”css,result” user=”42EG4M1″]See the Pen <a href=’https://codepen.io/42EG4M1/pen/bVMzze/’>Loading Animation CSS</a> by Tatsuya Azegami (<a href=’https://codepen.io/42EG4M1′>@42EG4M1</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
大人っぽいサイトにあう動き。
フェードする円
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”JdporK” default_tab=”css,result” user=”doncoco”]See the Pen <a href=’https://codepen.io/doncoco/pen/JdporK/’>CSS Loading Animation</a> by Jimmy Amash (<a href=’https://codepen.io/doncoco’>@doncoco</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
こういうフェードは最近多く見受けられます。サラッと入れるといい感じです。
SVGを使用したローディング
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”jEGbA” default_tab=”html,result” user=”aurer”]See the Pen <a href=’https://codepen.io/aurer/pen/jEGbA/’>SVG Loading icons</a> by Aurer (<a href=’https://codepen.io/aurer’>@aurer</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
全てSVGで作られたローディングセット。
おしゃれなローディングが増えてきているので積極的に取り入れていきたいですね！
