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

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

进度条效果截图

一、效果与代码

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

<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>

<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）即可完成使用应用。

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

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

查看案例

2、打包下载

可直接下载后研究使用。