[jQuery入門1] サイトのローディング画面をサクッと作る方法♪

jQueryの入門として簡単に画面読み込みの際、ローディング画面を作っちゃいまししょう。

スポンサーリンク

用意するもの

ローディング中の画像を用意します。
こんな感じのやつ。
[jQuery入門1] サイトのローディング画面をサクッと作る方法♪

これは、Gifアニメーションで作られています。
こちら、自分で作ったわけではなくジェネレータサイトで作ってみました。

loadergeneratorというところで、
登録不要!無料でいろんなパターンのローディング画像作れます。
よかったらこちらで作成して用意してみてください。
http://loadergenerator.com/

HTML

HTMLでは、divでローディング中に表示するものとローディング完了後に表示するもの2つのdivを用意します。

CSS

CSSでは、ローディング画像を中央に揃える設定をしています。
また、ローディング完了後に表示するものには、display:none;を設定します。

jQuery

まとめ

結構楽チンですね♪
サンプルもこちらに載せました。

ローディングさせるものが全くないのですぐ表示されますが動き的には問題ないはずです。
よかったらご参考までに♪


スポンサーリンク
レクタングル336
レクタングル336

よかったらシェアしてくれると嬉しいです♪

コメント

  1. Jenny より:

    Finish off that pretty piggy inspired When Pigs Fly Costume, or any swine inspired ensemble, with our adorable new Piggy Leewarmgrs. This charming Halloween Costume Accessory features stay put elasticized calf cuffs, side ruched two tone cuddly upper range bands with stripe accents and attached ultra soft two tone faux fur core with flowing structure and boot cut blunt […]

コメントをどうぞ

メールアドレスが公開されることはありません。