<!-- 打开弹窗按钮 -->

<button id="myBtn">装载</button>

​

<!-- 弹窗 -->

<div id="myModal" class="modal">

​

  <!-- 弹窗内容 -->

  <div class="modal-content">

    <span class="close">&times;</span>

    <div id="myProgress">

  <div id="myBar">10%</div>

</div>

​

<br>

​

  </div>

​

</div>

// 获取弹窗

var modal = document.getElementById('myModal');

// 打开弹窗的按钮对象

var btn = document.getElementById("myBtn");

// 获取 <span> 元素，用于关闭弹窗

var span = document.querySelector('.close');

// 点击按钮打开弹窗

btn.onclick = function() {

    modal.style.display = "block";

  move();

}

function move() {

  var elem = document.getElementById("myBar");   

  var width = 10;

  var id = setInterval(frame, 10);//frame是要执行的代码，10是10毫秒

  function frame() {

    if (width >= 100) {

      clearInterval(id);

    } else {

      width++; 

      elem.style.width = width + '%'; 

      elem.innerHTML = width * 1  + '%';

    }

  }

}

// 点击 <span> (x), 关闭弹窗

span.onclick = function() {

    modal.style.display = "none";

}

// 在用户点击其他地方时，关闭弹窗

window.onclick = function(event) {

    if (event.target == modal) {

        modal.style.display = "none";

    }

}

/* 弹窗 (background) */

.modal {

    display: none; /* 默认隐藏 */

    position: fixed; /* 固定定位 */

    z-index: 1; /* 设置在顶层 */

    left: 0;

    top: 0;

    width: 100%; 

    height: 100%;

    overflow: auto; 

    background-color: rgb(0,0,0); 

    background-color: rgba(0,0,0,0.4); 

}

#myProgress {

  width: 100%;

  background-color: #ddd;

}

​

#myBar {

  width: 10%;

  height: 30px;

  background-color: #4CAF50;

  text-align: center;

  line-height: 30px;

  color: white;

}

/* 弹窗内容 */

.modal-content {

    background-color: #fefefe;

    margin: 15% auto; 

    padding: 20px;

    border: 1px solid #888;

    width: 80%; 

}

​

/* 关闭按钮 */

.close {

    color: #aaa;

    float: right;

    font-size: 28px;

    font-weight: bold;

    margin:-6% -4%; 

}

​

.close:hover,

.close:focus {

    color: black;

    text-decoration: none;

    cursor: pointer;

}