topbar

JavaScript

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

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

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

デモ

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

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

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

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

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

topbar

imgViewer2画像のズームとパン機能を備えたjQueryプラグイン「imgViewer2」前のページ

シンプルなドロップダウンメニューを実装できるjQueryプラグイン「snakeMenu」次のページno-image

関連記事

  1. Tag-it

    JavaScript

    サジェスト機能を搭載したタグ編集ウィジェット「Tag-it」

    Tag-itはサジェスト機能を搭載したjQuery UIプラグインによ…

  2. JavaScript

    画面全体に背景を表示させフェードやスライドもできるjQuery「bgStretcher」

    ブラウザの画面全体に背景を表示させることができるjQueryプラグイン…

  3. Diagonal Slider

    JavaScript

    斜めにデザインされたスタイリッシュなjQueryイメージスライダー「Diagonal Slider」…

    Diagonal Sliderは斜めにデザインされたクールでスタイリッ…

  4. flipLightBox
  5. jQuery PieTimer

    JavaScript

    時間の経過とともに円形が欠けていくタイマー「jQuery PieTimer」

    jQuery PieTimerは時間の経過とともに円形のデザインが欠け…

  6. Simple Sidebar

最近の記事

  1. 紫陽花
  2. 生ハム&モッツァレラチーズ サラダラップ
  3. コガネムシ
  4. ショルダーハム&5種の野菜サンドイッチ
PAGE TOP