Skip to content

Instantly share code, notes, and snippets.

@veltman

veltman/README.md

Last active July 3, 2016 04:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save veltman/5bc85fa785c151be8fe54970bba70ca6 to your computer and use it in GitHub Desktop.
Save veltman/5bc85fa785c151be8fe54970bba70ca6 to your computer and use it in GitHub Desktop.
Download ZIP
Rainbow spinner
Raw
README.md

An Android-style loading spinner with a touch of rainbow.

Canvas would probably be a better idea.

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
path {
stroke-width: 1px;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
.append("g")
.attr("transform", "translate( 480 250 )")
.attr("clip-path", "url(#clip)");
var arc = d3.arc()
.innerRadius(175)
.outerRadius(210);
var clip = svg.append("defs")
.append("clipPath")
.attr("id", "clip")
.append("path");
svg.selectAll("path")
.data(d3.range(0, 181))
.enter()
.append("path")
.style("fill",function(d){
return d3.interpolateRainbow(d / 180);
})
.style("stroke",function(d){
return d3.interpolateRainbow(d / 180);
})
.attr("d",function(d){
return arc.startAngle(d * Math.PI / 90)
.endAngle(++d * Math.PI / 90)();
});
d3.timer(function(t){
svg.attr("transform","translate( 480 250 ) rotate(" + (360 * t / 5000 % 5000) + ")");
});
arc.startAngle(0)
.endAngle(Math.PI * 5 / 4);
stretch();
function stretch(end) {
var angle = arc[end ? "endAngle" : "startAngle"],
interpolate = d3.interpolateNumber(angle()(), angle()() + Math.PI * 9 / 8);
clip.transition()
.delay(500)
.duration(1000)
.attrTween("d",function(){
return function(t){
return angle(interpolate(t))();
};
})
.on("end", function(){
stretch(!end);
});
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment