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

HTML加载

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

一、环形加载 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">×</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");
// 获取  元素，用于关闭弹窗
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";
}
}