CSSだけで作るLoadingアニメーション#4

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

Loadingのイメージアニメーションで画像を使った時に、そのLoadingアニメーション画像を読み込むのに時間がかかっていてLoading表示できていないWEBサイトを見かけてしまうと、なんだか切ない気分になってしまいます。
 

その昔は、GIFアニメーションで行うしかなかったLoadingアニメも、今ではCSSの簡易記述だけでかなりの演出が可能になりました。
 

前回までも、色々なLoadingを紹介してきましたが、今回はWEBで掲載されていて、お気に入りの物を自分なりに書き直しをして紹介したいと思います。
 

スタンダード「circle」

デモ

ソースコード

解説

スマホサイトなどでもよく使われている標準的なLoadingアニメーションです。
12個の小さな円を正方形内に回転して配置し、それぞれをタイミングよく、opacity値の変更を行なっています。
非常にシンプルなので、円の形を変えたり、色を変えたりして、応用が聴きやすいソースです。

スタンダード「circle拡縮版」

デモ

ソースコード

解説

circleの円を透明度アニメから、拡大・縮小アニメに切り替えただけのモノですが、印象がガラッと変わるので、読み込みで使うと少し深みが出そうです。

スタンダード「CUBE」

デモ

ソースコード

解説

フラットデザインに合いそうなLoadingですが、意外とシンプルな構造になっています。
アニメーションタイミングが少し独特なので、タイミングを変えたいときは、内容を熟知して行なってください。
一つ一つのCUBEエレメントに文字を挿入してみても面白い効果が出るかもしれませんね。

前回記事紹介

CSSだけで作るLoadingアニメーション#3
 

CSSだけでLoadingアニメ素材を作る3パターン
 

CSSだけでLoadingアニメ素材を作る「Drop編」

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です