layui 进度条 设置刻度

注意进度条依赖 element 模块,否则无法进行正常渲染和功能性操作

<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="number">
  <div class="layui-progress-bar layui-bg-red" lay-percent="0%" id="number"></div>
</div>

 

//动态效果 进度条
layui.use(['table','element','form','laydate'], function(){
  var element = layui.element;
  
  	  //模拟loading
  	  //进度条 加载效果
      var n = 49; //进度条的刻度
      var b = 0; //加载效果使用
      var timer = setInterval(function(){
        b++;
        if(b == n){
          clearInterval(timer);
        }
        element.progress('number', b+'%');
      }, 100); // 200是进度条加载速度
});

//直接设置进度条

$("#number").attr("lay-percent","35%");

 

posted @   码奴生来只知道前进~  阅读(260)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 10亿数据,如何做迁移?
· 推荐几款开源且免费的 .NET MAUI 组件库
· c# 半导体/led行业 晶圆片WaferMap实现 map图实现入门篇
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
点击右上角即可分享
微信分享提示