topbar

JavaScript

画面上部に美しいプログレスバーを表示できる「topbar」

topbarは、ページ読み込み時に画面上部に美しいプログレスバーを表示できるのが特徴です。読み込まれるまでの間、視覚的にあとどのくらいか把握できるので閲覧者にとっては安心ですね。デザインも美しく、また圧縮版で1KBと軽量に仕上がっています。jQueryなどを必要としないのも嬉しいですね。

進捗状況を美しいカタチで

デモ

デモではページを読み込んでいる間に画面上部にカラフルなプログレスバーが表示されます。バーは左から右へスーッと伸びていき、右端までくると読み込まれたコンテンツが表示される仕組みです。

ローディング中にこのような進捗状況を示す機能があることで、「あとどのくらい時間がかかるのか」といった不安が解消されますね。ファイルも圧縮版で1KBと軽量ですし、jQueryなどのライブラリとの依存関係もないところがグッドです。

また、レスポンシブにも対応しているのでスマホやタブレットなどモバイルからでもしっかり目的を果たしてくれます。

オプションには、autoRun、barThickness、barColors、shadowBlur、shadowColorといった項目のカスタマイズが可能です。デフォルト値は、autoRunがtrue、barThicknessが3、shadowBlurが10になります。barColorsにはRGBa値を指定できるようになっています。

シンプルながらもカスタマイズ性が高く、自サイトに合ったプログレスバーを作り上げていけるはず。ページ読み込み時の進捗状況を美しいカタチで表示したいと思っている人は、ぜひ「topbar」を活用してみてはいかがでしょうか? ライセンスはMITになります。

topbar

関連記事

  1. Stripe.Com Navigation

    JavaScript

    コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

    ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウ…

  2. JavaScript

    中心から外側に広がっていくエフェクトのjQueryプラグイン「jQuery.twinkle」

    jQuery.twinkleというjQueryプラグインを使えば、中心…

  3. Hero slider

    JavaScript

    レスポンシブで横幅フルサイズのスライダーを実装できる「Hero slider」

    Hero sliderはレスポンシブに対応した横幅フルサイズのスライダ…

  4. Canvi

    JavaScript

    左右からスライド表示するシンプルなナビゲーションメニュー「Canvi」

    CanviはVanilla JSによるシンプルなナビゲーションメニュー…

  5. JavaScript

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラグイン「SHARDS」

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラ…

  6. JavaScript

    フレキシブルなjQueryプラグインのアコーディオンパネル「Flexible Slide-to-to…

    いい感じのアコーディオンがあったので試してみたところ、とてもよさげだっ…

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP