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

HTML加载

• 一、环形加载 1
• 二、环形加载 2
• 三、波形加载
• 四、百分比环形
• 五、进度条

  一、环形加载 1

  .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

  .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);
    }
  }
  

  三、波形加载

  .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;
  }
  

  四、百分比环形

  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;
    }());
  }
  

  五、进度条

  装载
  
  
    
    
  
      ×
      
  
    
  10%
  
   
  /* 弹窗 (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");
   
  // 获取  元素，用于关闭弹窗
  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  + '%';
      }
    }
  }
  // 点击  (x), 关闭弹窗
  span.onclick = function() {
      modal.style.display = "none";
  }
   
  // 在用户点击其他地方时，关闭弹窗
  window.onclick = function(event) {
      if (event.target == modal) {
          modal.style.display = "none";
      }
  }
  
                  
                  
                  
  （图片来源网络，侵删）