入力フォームの画面上部に入力の進捗状況を示すプログレスバーを表示することができる、
Javascriptのスクリプト「Fort.js」をご紹介します。
「Fort.js」
「Fort.js」を使用するとフォームを入力した時に進捗状況のプログレスバーを
アニメーションで表示することができます。
また、「Fort.js」はjQueryを使用しないで動作するスクリプトです。
下記にJavascriptのスクリプト「Fort.js」を使用して進捗状況を知らせるプログレスバーを
表示させた時の方法をメモします。
ライセンスはMITです。
■ 「Fort.js」の使い方
「Fort.js」をダウンロードします。
【共通で読み込むファイル】
ダウンロードしたスクリプトとスタイルを読み込みます。
headタグに下記のコードを記述します。
1 2 | < link rel = "stylesheet" href = "fort.min.css" > < script src = "fort.min.js" ></ script > |
【HTML】
bodyタグの後にプログレスバーを表示する時に使用するdivタグを記述します。
1 2 3 4 | < body > < div class = "top" > < div class = "colors" ></ div > </ div > |
【JS】
bodyの閉じタグの前に「Fort.js」のスクリプトを記述します。
1 2 3 4 | < script > solid(); </ script > </ body > |
上記の設定をして入力フォームを設置するとフォーム入力時、
画面上部にプログレスバーが表示するようになります。
また、エフェクトは他にもあります。
ログイン画面などの入力フォームで活用できそうです。
スタイルシートなどを変更すればプログレスバーの色やサイズなども変えることができます。