KOYO DIGITAL WORKSパーツギャラリー

ローディングアニメーション

  • Chrome
  • Firefox
  • IE11

css/jQUeryを使用するローディングアニメーション
(ローディングイメージにGIFアニメーションを使用)

ページアクセス時にローディングアニメーションを表示します。
全ての読み込みが完了したら、ローディングアニメーションを終了し、コンテンツを表示します。
ただし、読み込みに10秒以上かかる場合は、強制的にローディングアニメーションを終了します。

DEMO

参考:ページ読み込み中にローディング画面を表示する

css/jQUeryを使用するローディングアニメーション
(ローディングイメージにcssを使用)

上記と同じ方法でローディングアニメーションを表示します。
ローディングイメージに画像を使わず、cssのみで作成するので、色の変更などを簡単に行うことができます。
少し長くローディングイメージを表示するよう、設定しています。

DEMO

おすすめコンテンツ

リッチな動きをWebサイトに パーツギャラリー デザインギャラリー
ページの先頭へ