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. progresspieSVG

    JavaScript

    円形のプログレスバーを実装できる「progresspieSVG」

    progresspieSVGは円形のプログレスバーを実装できるjQue…

  2. JavaScript

    テキストを中央に向かうにつれて大きくしたりできるjQueryプラグイン「jqIsoText」

    結構おもしろかったのでメモしときます。テキストに簡単なエフェクトをかけ…

  3. slideSpeed

    JavaScript

    スライドアップ・ダウンを設定された速度で制御できる「slideSpeed」

    slideSpeedは、特定の要素のスライドアップ・スライドダウンを設…

  4. basicContext

    JavaScript

    使いやすいコンテキストメニューを実装できる「basicContext」

    basicContextはシンプルで使いやすいコンテキストメニューを実…

  5. ScrollMe

    JavaScript

    シンプルなスクロールエフェクトを実装できるjQueryプラグイン「ScrollMe」

    ScrollMeというjQueryプラグインを使えば、シンプルでスタイ…

  6. no-image

    JavaScript

    シンプルでベーシックなJavaScriptによるlightbox実装「halkaBox.js」

    halkaBox.jsは、シンプルでベーシックなJavaScriptに…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP