带有进度属性data-progression的表单#myform

<form id="myform">
    <p>
        <label>点击一个字段</label>
        <input  data-progression type="text" data-helper="提示用户帮助" name="name" value="" placeholder=""/>
    </p>

    <p>
        <label>提供更好的用户体验</label>
        <input data-progression type="text" data-helper="追踪用户输入表单进度" name="email" value="" placeholder=""/>
    </p>
    <p class="left">
        <label>另一个字段</label>
        <input data-progression type="text" data-helper="这个提示框是完全可定制的" name="mytel" value="" placeholder=""/>
    </p>
    <p>
        <label>电话号码</label>
        <textarea data-progression name="" data-helper="文本或者进度条可以关闭"></textarea>
    </p>
    <p>
        <input type="submit" class="button" name="" value="提 交" placeholder=""/>
    </p>
</form>

调用进度插件progression.js

<script type="text/javascript" src="progression.min.js"></script>

$("#myform").progression({
    tooltipWidth: '200', //提示框宽度
    tooltipPosition: 'right', //方向
    tooltipOffset: '50', //坐标
    showProgressBar: true, //显示进度条
    showHelper: true, //显示帮助
    tooltipFontSize: '14', //字体大小
    tooltipFontColor: 'fff', //字体演示
    progressBarBackground: 'fff', //进度条背景色
    progressBarColor: '6EA5E1', //进度条字体颜色
    tooltipBackgroundColor: 'a2cbfa', //提示框背景色
    tooltipPadding: '10', //提示框间距padding
    tooltipAnimate: true //提示框动画
});