no-image

JavaScript

ページ読み込み時に画面上部にプログレスバーを表示する「Skylo」

Skyloはページ読み込み時にプログレスバーを画面上部に表示できるのが特徴です。プログレスバーがあることで、あとどのくらいでページが読み込まれるかが瞬時に分かるのでとても便利ですね。Twitter Bootstrapを使用しています。

Skylo

デモ

DEMOと書かれたボタンをクリックすると、画面上部にプログレスバーが表示されます。左から右へ徐々にバーが伸びていくのを確認できるかと思います。

ページがしっかり読み込まれているかどうかを簡単に知ることができるのはユーザーにとっては安心ですね。

オプションにはstate、inchSpeed、initialBurst、flatといった項目が用意されています。デフォルト値は、stateが’info’、inchSpeedが200、initialBurstが5、flatがfalseです。

また、メソッドにはstart、end、set(width)、get、inch、show(callback)、removeがあります。

というわけで、ページ読み込み時にシンプルなプログレスバーを画面上部に表示させたい人は、ぜひ「Skylo」を活用されてみてはいかがでしょうか?

Skylo

関連記事

  1. no-image

    JavaScript

    シンプル・軽量なjQueryイメージビューア「WimmViewer」

    WimmViewerはシンプルで軽量なイメージビューアを実装できるjQ…

  2. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  3. ad-datepicker

    JavaScript

    アクセシブルなデートピッカーを実装できる「ad-datepicker」

    ad-datepickerはアクセシブルなデートピッカーを実装できるj…

  4. simple-calendar

    JavaScript

    イベント設定もできるシンプルなカレンダー実装「simple-calendar」

    simple-calendarは、イベント設定も可能なシンプルなカレン…

  5. Pongstagr.am

    JavaScript

    自分のインスタグラムの画像を表示できるjQueryプラグイン「Pongstagr.am」

    Pongstagr.amは自分のインスタグラムの画像をWebサイトに表…

  6. no-image

    JavaScript

    スワイプでのスライドもできるシンプルなスライダー「jquery-slide」

    jquery-slideはスワイプでのスライドにも対応したシンプルなス…

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP