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'),  // 获取画图环境，指明为2dcenterX = 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";}
}