ローディング

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

ローディング

おさえておきたいところ

ローディングアニメーションを使う目的と使いどころはこんな感じです。

       目的：サイト読み込みの進捗状況をユーザーに伝える
使いどころ：画面の読み込み中

数字カウントアップ

画面中央でカウントアップするローディングアニメーションです。

See the Pen 数字カウントアップ by Web Navigator (@web-navigator) on CodePen.

プログレスバー+数字カウントアップ

画面中央でプログレスバーとカウントアップするローディングアニメーションです。

See the Pen プログレスバー＋数字カウントアップ by Web Navigator (@web-navigator) on CodePen.

プログレスバー＋数字カウントアップ＋画面が開く

画面中央でプログレスバーとカウントアップするローディングアニメーションです。
１００％まで到達したら上下に開きます。

See the Pen プログレスバー＋数字カウントアップ＋画面が開く by Web Navigator (@web-navigator) on CodePen.

ロゴアニメーション

画面中央でロゴが「ふわっ」と表示されるローディングアニメーションです。

See the Pen ロゴアニメーション by Web Navigator (@web-navigator) on CodePen.

ロゴアウトラインアニメーション

画面中央でロゴの輪郭をなぞり、最後にカラーリングされるローディングアニメーションです。

See the Pen ロゴアウトラインアニメーション by Web Navigator (@web-navigator) on CodePen.

同日2回目のアクセスでローディング画面非表示

１日に２回以上アクセスするとローディング画面を非表示にするローディングアニメーションです。

See the Pen 同日2回目のアクセスでローディング画面非表示 by Web Navigator (@web-navigator) on CodePen.

次回の予定

ページの遷移を知らせる画面遷移アニメーションを作ってみようと思います＼＼\\٩( ‘ω’ )و //／／

合わせて読みたい

画面遷移

WEBさん

WordPressの不具合をなおす人

TwitterInstagramYouTubeContact

あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか？ WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。