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

默认百分比进度条默认代码 div css进度条

百分比进度条布局模板,默认样式进度条css进度条的宽度是100%适配于它的父级元素。采用div css布局进度条。

默认进度条
进度条效果截图

一、效果与代码

进度条内容
 
 

进度条的宽度是100%适配于它的父级元素宽度,上面第二个进度条是在一个300px的父容器中。

html代码
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="40%"></div>
</div>
<div style="margin-top: 15px; width:300px">
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="70%"></div>
</div>
</div>
引入JS与自定义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库文件,即可拷贝HTML和自定义JS代码就能实现。

项目使用步骤:
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 需要 引入JS库和自定义JS代码
layui教程 layui使用教程 layui教程地址

三、单独演示与进度条代码下载

1、css进度条在线单独演示

查看案例

2、打包下载

可直接下载后研究使用。

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

日期:2017-09-12 12:01 css学习与资料网 css代码