通过sonic.js写一个简单的loading
2017-06-23 本文已影响0人
wyq_0bed
<!doctype html>
<meta charset="utf-8" />
<title>Sonic</title>
<style>
body {
background: #222;
color: #FFF;
text-align: center;
font-family: sans-serif;
font-size: .8em;
width:100%;
height:100%;
}
#container {
overflow: hidden;
padding: 20px;
width: 100%;
height:100%;
margin: 0 auto;
position: fixed;
top:0;
left:0;
z-index: 100;
}
#in {
overflow: hidden;
}
a { color: #FFF; }
div.l {
float: left;
margin: 20px 20px 0 0;
height: 150px;
width: 150px;
position: relative;
}
canvas { display: block; background-color: white;width: 100%;
height:100%;}
#a{
position: relative;
z-index: 10;
}
</style>
<body>
<div id="container">
<div id="in"></div>
</div>
<div id="a">
</div>
<script src="../src/sonic.js"></script>
<script>
var loaders = [
{
width: 100,
height: 100,
stepsPerFrame: 1,
trailLength: 1,
pointDistance: .02,
fps: 30,
fillColor: '#05E2FF',
step: function(point, index) {
this._.beginPath();
this._.moveTo(point.x, point.y);
this._.arc(point.x, point.y, index * 7, 0, Math.PI*2, false);
this._.closePath();
this._.fill();
},
path: [
['arc', 50, 50, 30, 0, 360]
]
}
];
var d, a, container = document.getElementById('in');
var imgArr = document.getElementById("a");
for (var i = -1, l = loaders.length; ++i < l;) {
d = document.createElement('div');
d.className = 'l';
a = new Sonic(loaders[i]);
d.appendChild(a.canvas);
container.appendChild(d);
a.play();
}
</script>
<script>
var arrImgs = [
"",
"",
"",
""
];
var loadNum = 0;
for (var i = 0;i < arrImgs.length;i++) {
var img = new Image();
img.src = arrImgs[i];
img.onload = function (data) {
loadNum++;
imgArr.append(data);
if (loadNum == arrImgs.length) {
setTimeout(function () {
// d.style.display = 'none';
},1000)
}
}(img)
}
</script>
</body>
