topbarは、ページ読み込み時に画面上部に美しいプログレスバーを表示できるのが特徴です。読み込まれるまでの間、視覚的にあとどのくらいか把握できるので閲覧者にとっては安心ですね。デザインも美しく、また圧縮版で1KBと軽量に仕上がっています。jQueryなどを必要としないのも嬉しいですね。
進捗状況を美しいカタチで
以下のページからtopbarの実際のデモ動作をチェックできます。
デモではページを読み込んでいる間に画面上部にカラフルなプログレスバーが表示されます。バーは左から右へスーッと伸びていき、右端までくると読み込まれたコンテンツが表示される仕組みです。
ローディング中にこのような進捗状況を示す機能があることで、「あとどのくらい時間がかかるのか」といった不安が解消されますね。ファイルも圧縮版で1KBと軽量ですし、jQueryなどのライブラリとの依存関係もないところがグッドです。
また、レスポンシブにも対応しているのでスマホやタブレットなどモバイルからでもしっかり目的を果たしてくれます。
オプションには、autoRun、barThickness、barColors、shadowBlur、shadowColorといった項目のカスタマイズが可能です。デフォルト値は、autoRunがtrue、barThicknessが3、shadowBlurが10になります。barColorsにはRGBa値を指定できるようになっています。
シンプルながらもカスタマイズ性が高く、自サイトに合ったプログレスバーを作り上げていけるはず。ページ読み込み時の進捗状況を美しいカタチで表示したいと思っている人は、ぜひ「topbar」を活用してみてはいかがでしょうか？ ライセンスはMITになります。
topbarの詳細やダウンロードは、以下のページからどうぞ。
