krsanford/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
 <script src="https://d3js.org/d3.v3.min.js"></script>
    <style>
    @media (min-width: 900px) {
    .wait-spinner {
        width: 600px;
        height: 600px;
        margin-left: auto;
        margin-right: auto
    }
}

@media (min-width: 600px) {
    .wait-spinner {
        width: 480px;
        height: 480px;
        margin-left: auto;
        margin-right: auto
    }
}

@media (max-width: 599px) {
    .wait-spinner {
        width: 300px;
        height: 300px;
        margin-left: auto;
        margin-right: auto
    }
}

svg {
    background: transparent
}

path {
    fill: #32b8e5;
    stroke: #BBBBBB;
    stroke-width: 2
}
    </style>
  </head>
<div class="wait-spinner"></div>
    <script>
        (function () {

            var root = d3.select(".wait-spinner")

            var width = root.node().getBoundingClientRect().width,
                height = root.node().getBoundingClientRect().height,
                numberOfSections = 10,
                spinDuration = 20000,
                spinMinDuration = 1000,
                maxSpins = 2,
                transformDuration = 3000,
                transformMinDuration = 300;

            var pie = d3.layout.pie()
                .value(Math.random)
                .sort(null);

            var data = pie(d3.range(0, numberOfSections)).map(function (d) {
                d.innerRadius = Math.random() * width / 4;
                d.outerRadius = Math.random() * width / 4 + d.innerRadius;
                return d;
            });

            var arc = d3.svg.arc();

            var g = root.append("svg")
                .attr("width", width)
                .attr("height", height)
                .selectAll("g")
                .data(pie(data))
                .enter()
                .append("g")
                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")rotate(0)");

            var path = g
                .append("path")
                .attr("d", arc)
                .attr("stroke-opacity", function (d) { return Math.random(); })
                .attr("fill-opacity", function (d) { return Math.random(); });

            (function transformLoop() {
                path.transition()
                    .duration(function () {
                        return transformMinDuration + (Math.random() * (transformDuration - transformMinDuration));
                    })
                    .attr("stroke-opacity", function (d) { return Math.random(); })
                    .attr("fill-opacity", function (d) { return Math.random(); })
                    .attrTween("d", tweenArc(function (d, i) {
                        var inner = Math.random() * width / 4,
                            outer = Math.random() * width / 4 + inner;
                        return {
                            innerRadius: inner,
                            outerRadius: outer
                        };
                    }));
                setTimeout(transformLoop, transformDuration);
            })();

            g.each(spin);

            function spin() {
                var item = d3.select(this);
                (function repeat() {
                    item = item.transition()
                        .ease("elastic")
                        .duration(function () {
                            return spinMinDuration + (Math.random() * (spinDuration - spinMinDuration));
                        })
                        .attrTween("transform", function () {
                            return function (t) {
                                return "translate(" + width / 2 + "," + height / 2 + ")rotate(" + 360 * t * maxSpins + ")"
                            }
                        })
                        .each("end", repeat);
                })();
            }

            function tweenArc(b) {
                return function (a, i) {
                    var d = b.call(this, a, i), i = d3.interpolate(a, d);
                    for (var k in d) a[k] = d[k];
                    return function (t) { return arc(i(t)); };
                };
            }
        })();

    </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<style>
	@media (min-width: 900px) {
	.wait-spinner {
	width: 600px;
	height: 600px;
	margin-left: auto;
	margin-right: auto
	}
	}

	@media (min-width: 600px) {
	.wait-spinner {
	width: 480px;
	height: 480px;
	margin-left: auto;
	margin-right: auto
	}
	}

	@media (max-width: 599px) {
	.wait-spinner {
	width: 300px;
	height: 300px;
	margin-left: auto;
	margin-right: auto
	}
	}

	svg {
	background: transparent
	}

	path {
	fill: #32b8e5;
	stroke: #BBBBBB;
	stroke-width: 2
	}
	</style>
	</head>
	<div class="wait-spinner"></div>
	<script>
	(function () {

	var root = d3.select(".wait-spinner")

	var width = root.node().getBoundingClientRect().width,
	height = root.node().getBoundingClientRect().height,
	numberOfSections = 10,
	spinDuration = 20000,
	spinMinDuration = 1000,
	maxSpins = 2,
	transformDuration = 3000,
	transformMinDuration = 300;

	var pie = d3.layout.pie()
	.value(Math.random)
	.sort(null);

	var data = pie(d3.range(0, numberOfSections)).map(function (d) {
	d.innerRadius = Math.random() * width / 4;
	d.outerRadius = Math.random() * width / 4 + d.innerRadius;
	return d;
	});

	var arc = d3.svg.arc();

	var g = root.append("svg")
	.attr("width", width)
	.attr("height", height)
	.selectAll("g")
	.data(pie(data))
	.enter()
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")rotate(0)");

	var path = g
	.append("path")
	.attr("d", arc)
	.attr("stroke-opacity", function (d) { return Math.random(); })
	.attr("fill-opacity", function (d) { return Math.random(); });

	(function transformLoop() {
	path.transition()
	.duration(function () {
	return transformMinDuration + (Math.random() * (transformDuration - transformMinDuration));
	})
	.attr("stroke-opacity", function (d) { return Math.random(); })
	.attr("fill-opacity", function (d) { return Math.random(); })
	.attrTween("d", tweenArc(function (d, i) {
	var inner = Math.random() * width / 4,
	outer = Math.random() * width / 4 + inner;
	return {
	innerRadius: inner,
	outerRadius: outer
	};
	}));
	setTimeout(transformLoop, transformDuration);
	})();

	g.each(spin);

	function spin() {
	var item = d3.select(this);
	(function repeat() {
	item = item.transition()
	.ease("elastic")
	.duration(function () {
	return spinMinDuration + (Math.random() * (spinDuration - spinMinDuration));
	})
	.attrTween("transform", function () {
	return function (t) {
	return "translate(" + width / 2 + "," + height / 2 + ")rotate(" + 360 * t * maxSpins + ")"
	}
	})
	.each("end", repeat);
	})();
	}

	function tweenArc(b) {
	return function (a, i) {
	var d = b.call(this, a, i), i = d3.interpolate(a, d);
	for (var k in d) a[k] = d[k];
	return function (t) { return arc(i(t)); };
	};
	}
	})();

	</script>
	</html>
No results found