フォームの入力の進捗率がひと目でわかる「Fort.js」

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

f:id:jacklin8:20171101102125j:plain

DEMO

Fort.js

fort.min.js と fort.min.cssを <head> に入れて、<input> 要素を <div class="form"> で囲むだけ

※囲んだ<div>外には反映しません

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

<div class="form">
  <form method="post">
    <input type="text">
  </form>
</div>

<script>
    Fort.flash("#009DFF", "#000", "#6638F0");
</script>

デザインは5種類あります

ログイン画面などの入力フォームで活用してみてはいかがでしょうか