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. no-image

    JavaScript

    さまざまなSVGパターンによるCSSプログレスバー「Bars」

    Barsはさまざまな種類のSVGパターンによるCSSプログレスバーを実…

  2. flatpickr

    JavaScript

    超軽量で使い方もカンタンな日付ピッカー「flatpickr」

    flatpickrはjQueryなどのライブラリに依存することなく動作…

  3. ALighter

    JavaScript

    任意のテキストの場所に光を当ててくれるjQueryプラグイン「ALighter」

    ちょっとしたアクセントに使えそうですね。任意のテキストの場所に光を当て…

  4. Picker

    JavaScript

    iOSのようなピッカーを実装できるJSライブラリ「Picker」

    Pickerは、iOSのUIのようなピッカーを実装することができるJS…

  5. no-image

    JavaScript

    シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」

    Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるj…

  6. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP