jQuery进度条插件JQMeter的简单使用

jQMeter是一款简单使用的轻量级进度条jQuery插件

效果图：该效果时设置了进度条宽度，高度，动画时间，计数时间，宽度，高度

使用过程

1.需要引入的js文件

基于jQuery的：<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

jQMeter的：<script type="text/javascript" src="jqmeter.js"></script>

JQMeter的js文件拷贝网址： http://www.gerardolarios.com/plugins-and-tools/jqmeter/

jQuery的js文件是从CDN中加载的

（为了方便，html文件和js文件是放在同一个目录下，好一点的结构可以将js文件放在另外单独建的js文件夹中）

2.html中写一个空div，设置id：  <div id="jqmeter-container"></div>

3.在js中初始化进度条：

$(function(){
$('#jqmeter-container').jQMeter({
    goal:'1000',//进度条总长度(指的是进度)，必须的参数
    raised:'400',//进度条当前进度，必须的参数
    width:'200px',//显示的进度条的宽度
    height:'50px',//显示的进度条的宽度
    animationSpeed:2000,//进度条动画的时间
    counterSpeed:3000,//进度条计数的时间
    });

})

这个一个比较简单的使用，更详细的一些学习可以参考网站：http://www.jq22.com/jquery-info5283

网站中会有插件的其他参数的介绍，垂直的进度条本人没有使用成功

所有代码截图：