$(function () { var userProgress = $.Deferred(); var $profileFields = $("input"); var totalFields = $profileFields.length userProgress.progress(function (filledFields) { var pctComplete = (filledFields/totalFields)*100; $("#progress").html(pctComplete.toFixed(0)); }); userProgress.done(function () { $("#thanks").html("Thanks for completing your profile!").show(); }); $("input").on("change", function () { var filledFields = $profileFields.filter("[value!='']").length; userProgress.notify(filledFields); if (filledFields == totalFields) { userProgress.resolve(); } }); });
<p>Your profile is <span id="progress">0</span>% complete.</p> <p><input type="text" placeholder="first name" name="first"></p> <p><input type="text" placeholder="last name" name="last"></p> <p><input type="text" placeholder="email" name="email"></p> <div id="thanks"></div>
body { font-family: Helvetica, Arial, sans-serif; padding:10px; } input[type=text] { padding:4px; } p { margin-bottom:5px } #thanks { display:none; }