layui在弹出层进度条无法渲染

在实现上传显示进度的过程中，我引入了layui的组件，想要实现点击开始上传之后，出现弹出层，弹出层展示进度条。

但是在实现的过程中无论如何进度条都无法渲染出进度值。

效果如下：

img

我的代码如下：

// html部分
<div class="layui-btn-container">
     <button type="button" class="layui-btn layui-btn-normal" id="ID-upload-demo-choose" lay-options="{accept:'file'}">选择文件</button>
     <button type="button" class="layui-btn" id="ID-upload-demo-action" lay-on="upload_process">开始上传</button>
</div>

// js部分
layui.use('element',function(){
        var layer = layui.layer;
        var util = layui.util;
        var element = layui.element;
             
        util.on('lay-on',{
            "upload_process": function(){
                 layer.open({
                     type:'1',
                     title:'上传中',
                     area: ['420px', '80px'], 
                     content:'<div class="layui-progress" lay-filter="demo-filter-progress" lay-showpercent="true" lay-percent="30%"><div class="layui-progress-bar"></div></div>'
                 })      
            }
             
        })
        element.render('progress', 'demo-filter-progress');
    })

我有点疑惑，element.render('progress', 'demo-filter-progress') 不是可以在元素生成后渲染一次元素吗？为什么在这里会失效呢?

希望有带佬可以帮我解惑，万分感谢！

content的内容中，class为layui-progress-bar的div里面，缺钱了进度数字的span，里面添加上如下内容立刻
0%
添加完毕后整体内容如下

content: '<div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true" style="width: 250px;"><div class="layui-progress-bar" lay-percent="0%"><span class="layui-progress-text">0%</span></div></div>'

```

首先layui不是已经提供了上传带进度条的功能么，你用那个就可以直接完成你的要求。其次你都没有了解layui的机制，不是你随便用js渲染出来一个html它就能按照你的要求给你显示，这里你渲染完html得调用render函数来更新才行。
这是一个示例代码，根据layui的演示程序改的，希望能帮到你！


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./js/layui/css/layui.css" rel="stylesheet" />
</head>
<style>
    .container {
        margin: 50px 0 0 50px;
    }
</style>

<body>
    <div class="container">

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

        <div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
            <button class="layui-btn site-demo-active" id="setPercent">设置 50%</button>
            <button class="layui-btn site-demo-active" id="loading">模拟 loading</button>
        </div>
    </div>

</body>
<script src="./js/layui/layui.js"></script>
<script>
    //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //设置50%进度
        document.getElementById('setPercent').addEventListener("click", function () {
            element.progress('demo', '50%')
        });
        //模拟loading
        document.getElementById('loading').addEventListener("click", function () {
            var n = 0, timer = setInterval(function () {
                n = n + Math.random() * 10 | 0;
                if (n > 100) {
                    n = 100;
                    clearInterval(timer);
                }
                element.progress('demo', n + '%');
            }, 300 + Math.random() * 1000);

        });
    });
</script>

</html>