案例效果

案例逻辑

前提：我们需要一个根节点，用来将进度条插入到该节点里

根节点：
<div id='app'></div>

主逻辑：

let oApp = document.querySelector('#app'), // 根节点
    fragment = document.createDocumentFragment(), // 创建空白的文档片段
    oProgressBar = document.createElement('div'); // 进度条节点

  // 创建背景的节点跟百分比的节点
  for(let i = 0; i < 2; i++) {
      let div = document.createElement('div');
      fragment.appendChild(div);
  }

  // 将进度条节点插入到根节点中
  oApp.appendChild(oProgressBar);
  // 将文档片段插入到DOM中 避免多次操作DOM造成页面回流
  oProgressBar.appendChild(fragment);

  // 添加class属性
  oProgressBar.setAttribute('class', 'td-progress-bar');
  // 给进度条节点的第一个节点添加class属性
  oProgressBar.firstChild.setAttribute('class', 'td-progress-conent');
  // 给进度条节点的最后一个节点添加class属性
  oProgressBar.lastChild.setAttribute('class', 'td-percent');

  // 设置样式
  oProgressBar.style.position = 'relative';
  oProgressBar.style.width = '100%';
  oProgressBar.style.height = '25px';
  oProgressBar.style.border = '1px solid #c3c3c3';
  oProgressBar.style.padding = '1px';

  // 使用模板字符串动态渲染进度条
  oProgressBar.firstChild.style.width = '70%';
  oProgressBar.firstChild.style.height = '100%';
  oProgressBar.firstChild.style.background = 'linear-gradient(to right ,#DeA2A0 , #F6E7E6)';

  oProgressBar.lastChild.style.lineHeight = '25px';
  oProgressBar.lastChild.style.position = 'absolute';
  oProgressBar.lastChild.style.top = '0';
  oProgressBar.lastChild.style.right = '0';

  // 使用模板字符串动态渲染进度条数值
  oProgressBar.lastChild.innerText = '70%';