05 | 8月 | 2014

入力フォームの画面上部に入力の進捗状況を示すプログレスバーを表示することができる、
Javascriptのスクリプト「Fort.js」をご紹介します。

「Fort.js」を使用するとフォームを入力した時に進捗状況のプログレスバーを
アニメーションで表示することができます。

また、「Fort.js」はjQueryを使用しないで動作するスクリプトです。

下記にJavascriptのスクリプト「Fort.js」を使用して進捗状況を知らせるプログレスバーを
表示させた時の方法をメモします。

ライセンスはMITです。

■ 「Fort.js」の使い方

「Fort.js」をダウンロードします。

【共通で読み込むファイル】

ダウンロードしたスクリプトとスタイルを読み込みます。
headタグに下記のコードを記述します。

<link rel="stylesheet" href="fort.min.css">
<script src="fort.min.js"></script>

【HTML】

bodyタグの後にプログレスバーを表示する時に使用するdivタグを記述します。

<body>
    <div class="top">
        <div class="colors"></div>
    </div>

【JS】

bodyの閉じタグの前に「Fort.js」のスクリプトを記述します。

    <script>
        solid();
    </script>
</body>

上記の設定をして入力フォームを設置するとフォーム入力時、
画面上部にプログレスバーが表示するようになります。

また、エフェクトは他にもあります。

ログイン画面などの入力フォームで活用できそうです。
スタイルシートなどを変更すればプログレスバーの色やサイズなども変えることができます。

raining