Blog

jQueryでページ上に表示されるローディングのバーを作ってみる

2015.05.19Cat:jQuery デザイナー

スマホのブラウザやYoutubeの動画のページなどで、
ページの上にロードの状況を知らせるバーを見かけます。

 

画像が多いなど、ページ全体のファイル容量が大きくなってくると、
ページの読み込みが完了するまでに少し時間がかかってしまうことがあります。

サイトを軽くするのが一番適切ですが、

それが難しい場合、このローディングのバーがあると、読み込み状況を知ることができて、

少しだけですが、不安が軽減されます。

スマホでWEBページを見るときはデフォルトのブラウザにこの表示があるので何もする必要はありませんが、
PCでも同様に表示したい時もあるかもしれません。

味の明太子 博多中洲いとや
また、↑こちらのサイトのようにローディングバーをデザインの一部に取り込んでしまうのも面白いと思います。

今回は、こちらのサイトも参考に、このトップのローディングバーをjQueryを使って作ってみました。

 

↓こちらが作ってみたものです。

DEMO

※環境によっては一瞬しか表示されないので、見づらいかもしれません。

作り方

HTML

HTMLは、<body>の閉じタグの直前などに適当なクラス名をつけた<div>を用意します。

 

CSS

HTMLで設置した<div>に対して、上記のようなスタイルを設定します。

ポイントは、position:fixで設置することと、widthを0にしておくことです。

さらにtransitionを設定しておくと、動作が滑らかになります。

 

jQuery(JavaScript)

今回は容量が大きくなることの多い画像をローディングの対象としました。

通常のサイトではこちらの方法で問題無いと思います。

まず、ページ内の<img>の数を取得し、それが全部読み込まれた状態を100%とします。

↑こちらで読み込まれた画像の状況を更新しています。

 

読み込まれた状況はsetInterval()ですべての画像が読み込まれるまで、

一定の間隔でローディングバーのwidthとして反映します。

そして、100%読み込まれたら、ローディングバーを隠します。

このとき、.delay()により少しだけアニメーションの開始を遅らせて、100%読み込まれたことがわかりやすいようにしています。

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ