今日は、サイトのデザインを損なわずに、フォームの進捗をシンプルなプログレスバーで表示するスクリプト［Fort.js］を紹介します。

まずはサンプルをどうぞ。

［Fort.js］：サンプル

注目すべきメリットの１つは、jQuery を使わずに動作すること。
データ容量も軽いですし、進捗状況を表示するプログレスバーはサイトデザインの邪魔にならないので、ほとんどのサイトに

ユーザーがフォームに入力する際、その進捗をアニメーションで美しく表示するの単体で動作するスクリプトを紹介します。
進捗のデザインは邪魔にならないので、ほとんどのサイトで導入できます。

［Fort.js］の使い方

まずは公式サイトからスクリプト本体をダウンロードしてきましょう。

Fort.js -GitHub

続いて、スクリプトとスタイルシートを HTML 側の<head>〜</head>内で読み込みます。

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

さらに、<body>〜</body>内の最上部あたりにプログレスバーを表示するための<div>をセットします。

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

同じく<body>〜</body>タグ内の下部にて、適用するエフェクトを指定します。

用意されているエフェクトは４種類。

  • Default　：　solid()
  • Gradient　：　gradient()
  • Sections　：　sections()
  • Flash　：　flash()

例えば、デフォルトのエフェクトを使う際は以下のように記述します。

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

基本的な設定は以上。
バーの色やサイズを変更したい際は、スタイルシート側で簡単に調整することができます。
難易度も低いのでぜひ導入してみてはいかがでしょうか。

［Fort.js］：サンプル