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. Animate Transition
  2. JavaScript

    ボタンやアイコンに素敵なクリックエフェクトを実装できる「Waves」

    ボタンやアイコンに素敵なクリックエフェクトを実装することができる「Wa…

  3. no-image

    JavaScript

    シンプルなバナースライドショーを実装できる「jsslider」

    jssliderはシンプルなバナースライドショーを実装できるjQuer…

  4. funnyText.js
  5. nanoGALLERY
  6. Animated menu concept

    JavaScript

    かっこいいアニメーション付きメニュー実装「Animated menu concept」

    Animated menu conceptはかっこいいアニメーション付…

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP