显示百分比值进度条_网页进度条模板代码div css资源

显示值的百分比进度条，div css布局网页进度条资源。

显值百分比进度条

一、演示与代码

<div class="layui-progress" lay-showpercent="true">

<div class="layui-progress-bar" lay-percent="20%"></div>

</div>

<br>

<div class="layui-progress layui-progress-big" lay-showpercent="true">

<div class="layui-progress-bar" lay-percent="70%"></div>

</div>

<script src="layui/layui.js" charset="utf-8"></script>

<script>

layui.use('element', function(){

var $ = layui.jquery

,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块



//触发事件

var active = {

setPercent: function(){

//设置50%进度

element.progress('demo', '50%')

}

,loading: function(othis){

var DISABLED = 'layui-btn-disabled';

if(othis.hasClass(DISABLED)) return;



//模拟loading

var n = 0, timer = setInterval(function(){

n = n + Math.random()*10|0; 

if(n>100){

n = 100;

clearInterval(timer);

othis.removeClass(DISABLED);

}

element.progress('demo', n+'%');

}, 300+Math.random()*1000);



othis.addClass(DISABLED);

}

};



$('.site-demo-active').on('click', function(){

var othis = $(this), type = $(this).data('type');

active[type] ? active[type].call(this, othis) : '';

});

});

</script>

引入js库和自定义JS代码

特点：进度条按百分比计算，并显示百分比值。进度条总宽度自适应父级宽度，也可自定义进度条总宽度。

二、使用教程

使用说明：此资源基于layui框架，所以需要下载此框架文件，引入项目后，html页面代码引入css文件和js文件，有自定义JS代码，再HTML放入提供JS自定义代码，最后只需要拷贝对应html代码即可实现需要效果。

项目使用步骤：
1、下载layui压缩包；
2、解压后，将文件夹内”layui“文件夹整体拷贝入当前项目；
3、html引入layui.css（注意路径正确）；
4、拷贝需要效果HTML代码（和JS）即可完成使用应用。

三、单独演示与下载

1、演示

查看案例

2、下载