Lexx918/js.loader.html

## js.loader.html
<!DOCTYPE html>
<html>
<head>
    <!--

    DEMO: http://lexx918.ru/files/js.loader.html

    -->
<meta charset="utf-8">
<title>loader</title>
<style>
.loader {width: 80px; height: 80px; background-color: #eee; margin: auto}
</style>
</head>
<body>
<div class="loader"><canvas id="loader" width="80" height="80"></canvas></div>
<script>
var pic = document.getElementById("loader"),
    pic2d = pic.getContext("2d"),
    w = 80,
    h = 80,
    centerX = 40,
    centerY = 40,
    n = 10,
    pi2 = 2*Math.PI, // rad!
    step = pi2 / n, // rad!!
    start = 0, // rad!!!
    r = 31,
    rStep = 0.75,
    rMin = 2,
    rMax = rMin + (n - 1)*rStep,
    crs = [],
    rs = [],
    dir = 1;

for (var a, x, y, dirX, dirY, i = 0; i < n; i++) {
    a = start + step*i;
    // I
    if (a >= 0 && a < 0.5*Math.PI) {
        dirX = 1;
        dirY = -1;
    // II
    } else if (a >= 0.5*Math.PI && a < Math.PI) {
        a = Math.PI - a;
        dirX = -1;
        dirY = -1;
    // III
    } else if (a >= Math.PI && a < 1.5*Math.PI) {
        a = a - Math.PI;
        dirX = -1;
        dirY = 1;
    // IV
    } else {
        a = 2*Math.PI - a;
        dirX = 1;
        dirY = 1;
    }
    x = Math.cos(a) * r;
    y = Math.sin(a) * r;

    crs.push([
        centerX + x*dirX,
        centerY + y*dirY
    ]);
    rs.push(dir === 1 ? rMin + i*rStep : rMax - i*rStep);
}

var render = function(){
    pic2d.fillStyle = "rgb(238,238,238)";
    pic2d.fillRect(0, 0, w, h);

    pic2d.fillStyle = "rgb(55,55,55)";
    for (var i = 0; i < n; i++) {
        pic2d.beginPath();
        pic2d.arc(crs[i][0], crs[i][1], rs[i], 0, pi2);
        pic2d.fill();
    }
    rs.unshift(rs.pop());

    setTimeout(render, 125);
}
render();
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<!--

	DEMO: http://lexx918.ru/files/js.loader.html

	-->
	<meta charset="utf-8">
	<title>loader</title>
	<style>
	.loader {width: 80px; height: 80px; background-color: #eee; margin: auto}
	</style>
	</head>
	<body>
	<div class="loader"><canvas id="loader" width="80" height="80"></canvas></div>
	<script>
	var pic = document.getElementById("loader"),
	pic2d = pic.getContext("2d"),
	w = 80,
	h = 80,
	centerX = 40,
	centerY = 40,
	n = 10,
	pi2 = 2*Math.PI, // rad!
	step = pi2 / n, // rad!!
	start = 0, // rad!!!
	r = 31,
	rStep = 0.75,
	rMin = 2,
	rMax = rMin + (n - 1)*rStep,
	crs = [],
	rs = [],
	dir = 1;

	for (var a, x, y, dirX, dirY, i = 0; i < n; i++) {
	a = start + step*i;
	// I
	if (a >= 0 && a < 0.5*Math.PI) {
	dirX = 1;
	dirY = -1;
	// II
	} else if (a >= 0.5*Math.PI && a < Math.PI) {
	a = Math.PI - a;
	dirX = -1;
	dirY = -1;
	// III
	} else if (a >= Math.PI && a < 1.5*Math.PI) {
	a = a - Math.PI;
	dirX = -1;
	dirY = 1;
	// IV
	} else {
	a = 2*Math.PI - a;
	dirX = 1;
	dirY = 1;
	}
	x = Math.cos(a) * r;
	y = Math.sin(a) * r;

	crs.push([
	centerX + x*dirX,
	centerY + y*dirY
	]);
	rs.push(dir === 1 ? rMin + irStep : rMax - irStep);
	}

	var render = function(){
	pic2d.fillStyle = "rgb(238,238,238)";
	pic2d.fillRect(0, 0, w, h);

	pic2d.fillStyle = "rgb(55,55,55)";
	for (var i = 0; i < n; i++) {
	pic2d.beginPath();
	pic2d.arc(crs[i][0], crs[i][1], rs[i], 0, pi2);
	pic2d.fill();
	}
	rs.unshift(rs.pop());

	setTimeout(render, 125);
	}
	render();
	</script>
	</body>
	</html>