Javascript:画面上部に入力フォームの進捗状況を表示する「Fort.js」

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

Fort.js

jquery_fort_js_1

「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>

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

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

solid()

flash()

gradient()

sections()


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

  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です