TOP  >  javascript , WebDesign  >  プログラマーにとって便利なプログレスバーのJavaScript Plugins「 9 Free Progress Bar JavaScript Plugins For Web Designers」
2018年03月12日

プログラマーにとって便利なプログレスバーのJavaScript Plugins「 9 Free Progress Bar JavaScript Plugins For Web Designers」

Webサイト閲覧中によく見かけるプログレスバーですが、最近は動きや形も様々で遊び心のあるものも増えてきています。そんな中今回は、プログラマーにとって便利なプログレスバーのJavaScript Plugins「 9 Free Progress Bar JavaScript Plugins For Web Designers」の紹介したいと思います。

ProgressBar01
Animated Goal Progress Bar jQuery plugin

ベーシックなものから、ちょっと変わったものまで9種類のプログレスバーがピックアップされています。

詳しくは以下

ProgressBar02
ProgressBar.js – Progress bars with JavaScript
丸、三角、四角と任意のカスタムシェイプを設定できるプラグインです。
普段見かけるプログレスバーと形が異なるだけでも印象が変わりますね。
 
 
 
ProgressBar03
nanobar.js
プログレスバーアニメーションで構築された小型のプラグインです。
デザインもシンプルで汎用性も高く、単一の関数呼び出しで実行できるので開発者にとっても、便利なアイテムです。
 
 
 
ProgressBar04
jquery-circle-progress – jQuery Plugin to draw animated circular progress bars
見やすさと分かりやすさを兼ね揃えたPOPな印象のプログレスバーです。
ベーシックではありますが、カラーの変更などで印象も変えることができるので便利なプラグインです。
 
 
プログレスバーやローディング画面は、待ち時間を可視化することができるUIです。そのため状況に合ったものを設定する必要があります。また、サイトを制作する上で「ユーザーを待たせないこと」はとても重要なこと。ファイルの軽量化を図ることも重要なポイントです。待ち時間が長くなればなるほど、ユーザーはストレスを感じてしまうので、それを解消するためにも進捗状況を表示したり、遊び心を取り入れてみるのも良いのではないでしょうか。

9 Free Progress Bar JavaScript Plugins For Web Designers

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る