• RSS
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

ページを読み込む際に、jQueryでローディング画面を実装する方法のご紹介です。

jQueryとCSSでローディング

今回は以下のようなCSSとHTMLを用意しました。

CSS

.loaderの要素のtopleftの値(ローディング画像の表示位置)は、サイトに合わせて調整してみてください。

HTML


ローディング画像の生成

ローディング画像は以下のジェネレータより手軽に作成することができます。
手軽にローディング画像が作れるジェネレーター「Loader Generator」

Loader Generatorの使い方は、別途こちらの記事も参考にしてみてください。


Javascript

いくつか実装方法がありますが、まずは一番シンプルなローディングのパターンです。

次にsetTimeout()を使って、指定した時間の経過後にローディングを解除する方法です。

また、fadeOut()でローディング顔面をフェードアウトさせる方法もあります。

簡単なデモを以下のページに用意しました。setTimeout() を使ったローディングのデモになります。
jQueryとCSSでローディングデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください