layer弹窗中加载layui progress百分比进度条？

Question

如下进度条不显示。
期望是在导出数据时，在layer.msg中显示导出数据的百分比进度条。

```html
layer.confirm('查询周期超过3天，系统将自动为您导出所需数据！', {icon: 7, title: '警告'}, function (index) {
  layer.msg('正在下载数据，请稍候...<br><div class="progress-container"><div id="progress" class="progress"></div></div>',{ icon: 16, shade: 0.1});
  
  var progressBar = document.getElementById("progress");
  var width = 0;
  var timer = setInterval(function() {
    width += 10;
    progressBar.style.width = width + '%';
    if (width >= 100) {
      clearInterval(timer);
    }
  }, 500);
  
  $.ajax({
    type: 'GET',
    data: {"status":status,"start":start,"end":end},
    url: './data.json',
    contentType: "application/json",
    success: function (res) {
      console.log(res.data)
      table.exportFile(myTable.config.id, res.data, 'csv',"明细");
    }
  });

  // 关闭弹窗
  layer.close(index);
});

```

Answer 1

引用 皆我百晓生 小程序回复内容作答：

您好，根据您提供的代码，我发现问题出在使用layer.msg弹窗中的HTML代码无法被正确解析和显示，进而导致进度条无法显示。这是因为layer.msg默认只接受纯文本信息，不支持解析HTML代码。

要解决这个问题，我建议您使用layer.open方法，并设置type为1，这样可以打开一个带有自定义HTML内容的弹窗。您可以将进度条的代码放在这个自定义HTML中，然后通过JavaScript代码控制进度条的变化。

以下是修改后的代码示例：

layer.confirm('查询周期超过3天，系统将自动为您导出所需数据！', {icon: 7, title: '警告'}, function (index) {
  layer.open({
    type: 1,
    title: false,
    closeBtn: false,
    area: '300px',
    shade: 0.1,
    content: '正在下载数据，请稍候...<br><div class="progress-container"><div id="progress" class="progress"></div></div>'
  });

  var progressBar = document.getElementById("progress");
  var width = 0;
  var timer = setInterval(function() {
    width += 10;
    progressBar.style.width = width + '%';
    if (width >= 100) {
      clearInterval(timer);
    }
  }, 500);

  $.ajax({
    type: 'GET',
    data: {"status": status, "start": start, "end": end},
    url: './data.json',
    contentType: "application/json",
    success: function (res) {
      console.log(res.data)
      table.exportFile(myTable.config.id, res.data, 'csv', "明细");
    }
  });

  // 关闭弹窗
  layer.close(index);
});

这样，进度条应该可以正确地显示出来并随着时间递增。请注意，此示例使用了layer.open方法创建弹窗，通过设置title和closeBtn为false来隐藏标题栏和关闭按钮，设置area为'300px'来定义弹窗宽度。您可以根据需要调整这些参数。