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. Wipe Slider

    JavaScript

    背景画像を滑らかにスライドさせるjQueryプラグイン「Wipe Slider」

    Wipe Sliderは背景画像を滑らかにスライドさせることができるj…

  2. Vide

    JavaScript

    背景にvideoを表示できるjQueryプラグイン「Vide」

    VideというjQueryプラグインを使えば、Webサイトの背景にvi…

  3. JavaScript

    軽量で嬉しい!画像を拡大ズームしてくれるjQueryプラグイン「Leroy Zoom」

    Leroy ZoomというjQueryプラグインを使えば、画像を拡大ズ…

  4. Philter

    JavaScript

    CSSのフィルターをコントロールできるjQueryプラグイン「Philter」

    PhilterはCSSのフィルターを簡単にコントロールすることができる…

  5. jQuery Tabs with Content Overlays
  6. SimpleAccordion

    JavaScript

    シンプルなアコーディオンを実装できるjQueryプラグイン「SimpleAccordion」

    SimpleAccordionは、シンプルなアコーディオンを実装するこ…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP