html+css+js实现的进度条

html css js实现的进度条

进度条

HTML

代码语言：javascript复制

<div class="progress-dialog">
  <strong>载入中...</strong>
  <div class="progress-body">
  <div class="progress-wrap">0%</div>
  </div>
</div>
<button onclick="progressMove();">开始</button>

CSS

代码语言：javascript复制

/* 我的css */
.progress-dialog{
  position: fixed;
  z-index: 999;
  height: 100%;
  width:100%;
  top: 0;
  left: 0;
  background-color:rgba(0,0,0,0.1);
  font-size: 1.5vw;
  text-align:center;
  display: none;
}

.progress-dialog strong{
  display: block;
  margin: 18% auto;
  margin-bottom: 1%;
  color: chocolate;
  width:30%;
}

.progress-body{
  margin: 0 auto;
  width:30%;
  border-radius: 15vw;
  background-color: #bdd0e4;
}

.progress-wrap{
  width: 0%;
  background-color: #489ef9;
  color: white;
  border-radius: 15vw;
  line-height: 5vh;
}

JS

代码语言：javascript复制

/**
 * 进度条显示，CSS样式自行设计。
 */
function progressMove() {
  var dialogPar = document.querySelector(".progress-dialog");
  var dialogWrap = document.querySelector(".progress-wrap");
  var wrapWidth = 0;
  dialogPar.style.display = "block";
  var temp = setInterval(function () {
    if (wrapWidth >= 100) {
      clearInterval(temp);
      dialogPar.style.display = "none";
      dialogWrap.style.width = "0%";
      dialogWrap.innerHTML = "0%";
    } else {
      wrapWidth  = 5;
      dialogWrap.style.width = wrapWidth   '%';
      dialogWrap.innerHTML = wrapWidth   '%';
    }
  }, 90);
}

css html progress var width

0 人点赞