在我印象中，今天应该是深圳近几年里最冷的一天了，几天时间从二十多度狂飙到几度。
这气温也是醉了，大冷天手不都不想伸出来。
当然了，再冷的天气击退不了我发帖的激情，额~~~哆嗦~~~
为了更好的用户体验，在页面加载前，避免出现白页面，我们一般会使用loading形式，提示用户预览的页面正在加载。今天分享几款不错的loading效果，天冷懒得打字，直接上干货：
1、顶部滚动滚动加载：
代码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type"> <meta content="text/html; charset=utf-8"> <meta charset="utf-8"> <title>分享几个页面加载前loading状态的形式</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="email=no"> <link rel="stylesheet" type="text/css" href="/demo/loading/css/animate.css"> </head> <body> <div id="progressBar"> <div class="progress-bar"></div> </div> </body> </html>
2、环形数字加载：
<!DOCTYPE html>
<html>
<head>
<title>分享几个页面加载前loading状态的形式</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<canvas id="circularProgressContainer"></canvas>
<script type="text/javascript">
var CircularProgress = function(selector,option){
this.canvas = document.querySelector(selector);
this.canvas.width = option.width;
this.canvas.height = option.height;
this.ctx = this.canvas.getContext("2d");
this.option = option;
this.render();
}
CircularProgress.prototype= {
sector: function (x, y, r, begin, end, color, clock) {
var ctx = this.ctx;
ctx.beginPath();
ctx.fillStyle = color;
ctx.moveTo(x, y);
ctx.arc(x, y, r, begin, end, clock)
ctx.lineTo(x, y);
ctx.fill();
},
circle: function (x, y, r, color) {
this.sector(x, y, r, 0, 2 * Math.PI, color);
},
getColor: function (percent) {
if (percent < 20) return "#6B0300";
if (percent < 40) return "#814700";
if (percent < 60) return "#847A00";
if (percent < 80) return "#556C02";
if (percent <= 100) return "#367D00";
},
text: function (x, y, text, color) {
this.ctx.fillStyle = color;
this.ctx.font = "bold 20px Verdana";
this.ctx.fillText(text,x - this.ctx.measureText(text).width / 2, y+8 );
},
render: function () {
var x = this.canvas.width / 2, y = this.canvas.height / 2, r = x - 20, innerR = r - this.option.ringWidth;
this.circle(x, y, r, "#DCDCDC")
this.sector(x, y, r, -Math.PI / 2, 2 * Math.PI * this.option.percent / 100 - Math.PI / 2, this.getColor(this.option.percent));
this.circle(x, y, innerR, "white");
this.text(x, y, this.option.percent + "%","black");
}
}
var cp = new CircularProgress("#circularProgressContainer", { width: 150, height: 150, percent: 0, ringWidth: 15 });
//为了演示
setInterval(function () {
if (cp.option.percent >= 100) cp.option.percent = 0;
cp.option.percent++;
cp.render();
}, 100)
</script>
</body>
</html>
3、乐器
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type"> <meta content="text/html; charset=utf-8"> <meta charset="utf-8"> <title>分享几个页面加载前loading状态的形式</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="email=no"> <link rel="stylesheet" type="text/css" href="/demo/loading/css/newton.css"> </head> <body> <div class="wapper"> <div class="newtonBall-base"></div> <div id="newtonBall-left" class="newtonBall-left"></div> <div id="newtonBall-right" class="newtonBall-right"></div> </div> </body> </html>
4、收音机
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type"> <meta content="text/html; charset=utf-8"> <meta charset="utf-8"> <title>分享几个页面加载前loading状态的形式</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="email=no"> <link rel="stylesheet" type="text/css" href="/demo/loading/css/cassette.css"> </head> <body> <div class="wapper"> <div class="cassette-base"></div> <div id="cassette-left" class="cassette"></div> <div id="cassette-right" class="cassette"></div> </div> </body> </html>
5、风扇
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type"> <meta content="text/html; charset=utf-8"> <meta charset="utf-8"> <title>分享几个页面加载前loading状态的形式</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="email=no"> <link rel="stylesheet" type="text/css" href="/demo/loading/css/orange.css"> </head> <body> <div class="wrapper"> <div id="orange-base"> <div id="orange-bar" class="orangeBar"></div> </div> <div id="orange-right" class="orangeRight"></div> <div id="leaf" class="leaf1"></div> <div id="leaf" class="leaf2"></div> <div id="leaf" class="leaf3"></div> </div> </body> </html>
OK，今天分享的干货差不多就这些。
