<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>loading</title>
<style>
body {
background: #000;
}
canvas {
background: #181818;
box-shadow: 0 0 0 1px #282828;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<script>
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
width = 400,
height = 100,
loaded = 0,
loaderSpeed = 0.6,
loaderWidth = 310,
loaderHeight = 16,
loaderX = width / 2 - loaderWidth / 2,
loaderY = height / 2 - loaderHeight / 2,
particles = [],
particleLift = 180,
particleRate = 4,
hueStart = 0,
hueEnd = 120,
hue = 0,
gravity = 0.12,
dpr = window.devicePixelRatio;
document.body.appendChild(canvas);
canvas.width = width;
canvas.height = height;
canvas.style.width = (width / dpr) + 'px';
canvas.style.height = (height / dpr) + 'px';
ctx.globalCompositeOperation = 'lighter';
function rand(rMi, rMa) {
return ~~((Math.random() * (rMa - rMi + 1)) + rMi);
}
function updateLoader() {
if (loaded < 100) {
loaded += loaderSpeed;
} else {
loaded = 0;
}
}
function renderLoader() {
ctx.fillStyle = '#000';
ctx.fillRect(loaderX, loaderY, loaderWidth, loaderHeight);
hue = hueStart + (loaded / 100) * (hueEnd - hueStart);
var newWidth = (loaded / 100) * loaderWidth;
ctx.fillStyle = 'hsla(' + hue + ', 100%, 40%, 1)';
ctx.fillRect(loaderX, loaderY, newWidth, loaderHeight);
ctx.fillStyle = '#444';
ctx.fillRect(loaderX, loaderY, newWidth, loaderHeight / 2);
}
function Particle() {
this.x = loaderX + ((loaded / 100) * loaderWidth) - rand(0, 1);
this.y = height / 2 + rand(0, loaderHeight) - loaderHeight / 2;
this.vx = (rand(0, 4) - 2) / 100;
this.vy = (rand(0, particleLift) - particleLift * 2) / 100;
this.width = rand(1, 4) / 2;
this.height = rand(1, 4) / 2;
this.hue = hue;
}
Particle.prototype.update = function(i) {
this.vx += (rand(0, 6) - 3) / 100;
this.vy += gravity;
this.x += this.vx;
this.y += this.vy;
if (this.y > height) {
particles.splice(i, 1);
}
};
Particle.prototype.render = function() {
ctx.fillStyle = 'hsla(' + this.hue + ', 100%, ' + rand(50, 70) + '%, ' + rand(20, 100) / 100 + ')';
ctx.fillRect(this.x, this.y, this.width, this.height);
};
function createParticles() {
var i = particleRate;
while (i--) {
this.particles.push(new Particle());
}
}
function updateParticles() {
var i = particles.length;
while (i--) {
var p = particles[i];
p.update(i);
};
}
function renderParticles() {
var i = particles.length;
while (i--) {
var p = particles[i];
p.render();
}
}
function clearCanvas() {
ctx.clearRect(0, 0, width, height);
}
function loop() {
requestAnimationFrame(loop);
clearCanvas();
createParticles();
updateLoader();
updateParticles();
renderLoader();
renderParticles();
}
loop();
</script>
</body>
</html>