Create a gist now

Instantly share code, notes, and snippets.

@jonsadka /.block
Last active Sep 18, 2016

Embed
Slack loading bubbles
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100%; background: RGBA(87, 57, 90, 1) }
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see!
var svg = d3.select("body").append("svg")
// curcle numbers
var circles = d3.range(5);
var smallRadius = 40;
var largeRadius = 80;
var marginLeft = window.innerWidth/2 - (circles.length - 2) * smallRadius - largeRadius;
var cycleCount = 0;
var incrementCount = true;
var ratio = largeRadius/smallRadius;
svg.selectAll('circle').data(circles)
.enter().append("circle")
.attr({
cx: function(d, i){
if (d < cycleCount) return smallRadius * 2 * d + marginLeft;
if (d === cycleCount) return largeRadius/2 + smallRadius * 2 * d + marginLeft;
if (d > cycleCount) return largeRadius + smallRadius * 2 * d + marginLeft;
},
cy: window.innerHeight/2,
fill: 'RGBA(34, 179, 123, 1)',
r: function(d, i){
if (i === cycleCount) return largeRadius;
return smallRadius;
}
})
.each(cycle);
var numberCircles = circles.length - 1;
function cycle(data) {
if (data === 0){
if (cycleCount === numberCircles) incrementCount = false;
if (cycleCount === 0) incrementCount = true;
if (incrementCount) cycleCount++;
if (!incrementCount) cycleCount--;
}
d3.select(this).transition().duration(250)
.attr('r', function(d, i){
if (cycleCount === d) return largeRadius;
return smallRadius;
})
.attr('cx', function(d, i){
if (d < cycleCount) return 0 + smallRadius * 2 * d + marginLeft;
if (d === cycleCount) return largeRadius/2 + smallRadius * 2 * (d) + marginLeft;
if (d > cycleCount) return largeRadius + smallRadius * 2 * (d) + marginLeft;
})
.each("end", cycle);
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment