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

no-imageサイドバーをフローティングできる「FloatSidebar.js」前のページ

多彩なカスタマイズができるjQueryアコーディオンプラグイン「BeefUp」次のページBeefUp

関連記事

  1. VenoBox

    JavaScript

    画像・Google マップ・YouTubeなどを埋め込めるLightbox風jQueryプラグイン「…

    VenoBoxは色んなコンテンツを埋め込めるLightbox風jQue…

  2. no-image

    JavaScript

    トップに素早く戻れるボタンを実装できるjQueryプラグイン「TopButton」

    TopButtonはボタンをクリックするだけで画面トップに素早く戻れる…

  3. Typewriter JS

    JavaScript

    タイプライターっぽいエフェクトでテキストを表現できる「Typewriter JS」

    Typewriter JSは、タイプライターを使って文字入力するような…

  4. jQuery cardslider

    JavaScript

    カードをスライドさせるようにコンテンツを表示できる「jQuery cardslider」

    jQuery cardsliderは、コンテンツをカードのように表示し…

  5. no-image

    JavaScript

    1日のイベントスケジュールを作成できる「Jquery Layoutday plugin」

    Jquery Layoutday pluginは、1日のイベントスケジ…

  6. JavaScript

    jQuery Backstretchを使えば超簡単にブラウザサイズに合った背景画像を表示できる

    背景画像をブラウザのサイズに合わせて表示できるプラグイン「jQuery…

最近の記事

  1. Anker Bolder LC30
  2. BG-R10
  3. EOS R6

アーカイブ

PAGE TOP