一、环形加载 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'),
context = canvas.getContext('2d'),
centerX = canvas.width/2,
centerY = canvas.height/2,
rad = Math.PI*2/100,
speed = 0.1;
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();
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>
.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);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
elem.innerHTML = width * 1 + '%';
}
}
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}