HTML实现进度条/加载框模版

一、环形加载 1

<div class="loader"></div>

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { 
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg); 
  }
}

二、环形加载 2

<div class="loader"></div>

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% { 
    -webkit-transform: rotate(360deg); 
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% { 
    transform: rotate(360deg);
  }
}

三、波形加载

<div class="placeholder">
    <div class="loading">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

.placeholder {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.loading {
  width: 80px;
  height: 40px;
  margin: 0 auto;
  margin-top: 100px;
}
.loading span {
  display: inline-block;
  width: 8px;
  height: 100%;
  border-radius: 4px;
  background: lightgreen;
  -webkit-animation: load 1s ease infinite;
}
@-webkit-keyframes load {
  0%, 100% {
    height: 40px;
    background: lightgreen;
  }
  50% {
    height: 70px;
    margin: -15px 0;
    background: lightblue;
  }
}
.loading span:nth-child(2) {
  -webkit-animation-delay: 0.2s;
}
.loading span:nth-child(3) {
  -webkit-animation-delay: 0.4s;
}
.loading span:nth-child(4) {
  -webkit-animation-delay: 0.6s;
}
.loading span:nth-child(5) {
  -webkit-animation-delay: 0.8s;
}

四、百分比环形

<canvas id="canvas" width="500" height="500" style="background:#000;"></canvas>

window.onload = function() {
  var canvas = document.getElementById('canvas'),  // 获取canvas元素
      context = canvas.getContext('2d'),  // 获取画图环境，指明为2d
      centerX = canvas.width/2,   // Canvas中心点x轴坐标
      centerY = canvas.height/2,  // Canvas中心点y轴坐标
      rad = Math.PI*2/100, // 将360度分成100份
      speed = 0.1; // 加载的快慢 

  // 绘制5像素宽的运动外圈
  function blueCircle(n) {
    context.save();
    context.strokeStyle = "#fff"; // 设置描边样式
    context.lineWidth = 5; // 设置线宽
    context.beginPath(); // 路径开始
    context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false); // 用于绘制圆弧
    context.stroke(); // 绘制
    context.closePath(); // 路径结束
    context.restore();
  }
  
  // 绘制白色外圈
  function whiteCircle() {
    context.save();
    context.beginPath();
    context.lineWidth = 2; // 设置线宽
    context.strokeStyle = "red";
    context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);
    context.stroke();
    context.closePath();
    context.restore();
  }  
  
  // 百分比文字绘制
  function text(n) {
    context.save(); // 保证样式属性只运用于该段 canvas 元素
    context.strokeStyle = "#fff"; // 设置描边样式
    context.font = "40px Arial"; // 设置字体大小和字体
    // 字
    context.strokeText(n.toFixed(0)+"%", centerX-25, centerY+10);
    context.stroke(); // 绘制
    context.restore();
  } 
  
  // 动画循环
  (function drawFrame() {
    window.requestAnimationFrame(drawFrame);
    context.clearRect(0, 0, canvas.width, canvas.height);
    whiteCircle();
    text(speed);
    blueCircle(speed);
    if(speed > 100) speed = 0;
    speed += 0.1;
  }());
}

五、进度条

<!-- 打开弹窗按钮 -->
<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>

/* 弹窗 (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;
}

// 获取弹窗
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";
    }
}