Home > Design > サクッとできるローディングアニメーション実装3つ
Home > Html & Css > サクッとできるローディングアニメーション実装3つ
Home > Javascript > サクッとできるローディングアニメーション実装3つ

サクッとできるローディングアニメーション実装3つ

公開日:

最終更新日:

loading animation image

サクッと出来るシリーズのローディングアニメの作り方です。
良くあるのから、どれ位読み込んでるのか分かるのまで

よくあるやつ

クルクル回ってるやつです。
ちなみに読み込むと消えるので、スーパーリロードしてください。
Google chromeで
[windows: Shift + F5]
[mac: Cmd + Shift + R]

Demo

デモはこちら

Html

黒バックのレイヤーとクルクルのレイヤーです。

css

#loadingWrapが黒バックで#loadingがクルクルです。
.loadingNoneで読み込んだら1秒後に消える仕様にしてます。

javascript

読み込んだら、loadingNoneクラスを付けるってやってるだけです。

読み込み具合が%でカウントされるやつ

現在の読み込み具合が何%かで表示されていく感じです。

Demo

デモはこちら

html

id=”loadRatioArea”に数字が書き込まれていきます。

css

#loadingが黒バックで、.textが文字全体を囲って真ん中に表示させている所です。
#loadingNoneは上と同じで消す為のクラスです。

javascript

画像の数を数えて、それを100で割って、それが読み込まれたら足していっています。

読み込み具合によって、棒が伸びるやつ

読み込み具合で棒が伸びていくやつです。
ファミコンとかのローディングってこんなイメージです。

Demo

デモはこちら

html

id=”loading”が黒バックで、id=”loading_bar”が棒です。

css

#loading_barWrapで棒と読み込み中の文字を真ん中に持ってきて、100%の時の横幅を決めてます。
#loading_barは横幅0にして読み込み具合で#loading_barWrapの大きさまで広げます。
transition-duration: 1s;で大きさが変わった時のアニメーションの時間を設定しています。今は1秒

javascript

さっきと同じく画像の数を数えて100で割ってます。
それが読み込まれたら横幅を%をloading_barに付けていっています。
そのまま消しちゃうとアニメーションを待たずに消えちゃうので、setTimeoutで毎秒監視して、横幅がloading_barWrapの幅になったらloadingNoneクラスを付けて消します。
loadingNoneクラスが付いてたら監視終了です。

chromeだけだと、setTimeoutでなくオブザーバー(ResizeObserver)で監視出来るので、chromeだけでいいよって人か、他のブラウザが対応されたよって時は以下のオブザーバーでも監視できます。
まあそうなった時はES6の記述でいいと思いますが。

以上です。変だったり、こうした方がいいよとかあったら教えてください。

Comment

よろしければコメントをどうぞ