layui进度条动态渲染

在 layui中，进度条是通过 `element.progress()` 方法实现的。要动态渲染进度条，只需要在进度变化时调用该方法即可。

以下是一个示例代码，实现了进度条的动态渲染：

<div class="layui-progress layui-progress-big" lay-showPercent="true">
  <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
</div>

// 获取进度条元素
var progress = layui.element.progress('demo', '0%');

// 模拟进度变化
var percent = 0;
var timer = setInterval(function() {
  percent += Math.random() * 10;
  progress.percent(percent + '%');
  if (percent >= 100) {
    clearInterval(timer);
  }
}, 1000);

在上面的示例中，我们首先通过 `element.progress()` 方法创建了一个进度条，并将初始进度设置为 0%。然后通过定时器模拟进度的变化，每次增加一个随机数，直到进度达到 100%。在每次进度变化时，我们都调用了 `progress.percent()` 方法更新进度条的显示。

注意，在调用 `element.progress()` 方法时，第一个参数是进度条所在的 DOM 元素的 id 或 DOM 对象。如果有多个进度条，需要给不同的进度条指定不同的 id。