您的位置:首页 > css拷用 > 进度条 > 正文

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

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

显值百分比进度条
显值百分比进度条

一、演示与代码

1、显值进度条

 

 

 

 

 

2、html代码
<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>
3、js代码
<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)即可完成使用应用。

项目 操作 备注
框架 layui

立即下载layui v2X(实时更新

引入CSS 需要 <link rel="stylesheet" href="layui/css/layui.css" media="all">
引入JS 需要 html引入JS库和自定义js代码
layui教程 layui使用教程 layui教程地址

三、单独演示与下载

1、演示

查看案例

2、下载

相关标签: 进度条 百分比
文章来源网址:www.thinkcss.com/kaoyong/1427.shtml

日期:2017-09-13 09:08 ThinkCSS整理 css资源