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

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

Loading画像でアニメGIFを使うのは手軽なんですが、やはりLOADINGなのに、読み込みが重いと何のための読み込みなのか疑問に感じ始めたので、今後はCSSのみでLoadingアニメーションを作っていきたいと思います。
 

とりあえず、GIF命という人向けには、過去記事の、GIFアニメリンクをお勧めします。
 

[素材] 著作権フリーの「Loading」Gifアニメーション画像 40個

Dropアニメ

今回は、水滴が移動するようなアニメーションをイメージして、以前書いた記事[css] エレメントが結合するアニメの作成を少し改造して、作って見ました。
 

サンプル

ソースコード

ほんのちょっとだけ解説

class=”mid”が移動している水滴ですが、2つ置いて、animation-delayでずらしながら表示しています。
 

1つだと、なんとなく間の抜けたアニメーションだったので、2つにしていますが、距離を大きくして数を増やしても面白いかもしれません。
 

あとは、class=”loading”エレメントを画面の中央にして、背景に半透明blackなどをセットすると、loadingで利用できるようになると思います。
 

贅沢を言えば、loadingの時に欲しいprogress値ですかね?次回はそういうインターフェイスのloadingを作ってみるとしよう。

Leave a Reply

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