Skip to content

Instantly share code, notes, and snippets.

@enjalot
Created June 19, 2013 23:07
Show Gist options
  • Save enjalot/5818931 to your computer and use it in GitHub Desktop.
Save enjalot/5818931 to your computer and use it in GitHub Desktop.
looping loader
{"description":"looping loader","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/eweERxu.png"}
var svg = d3.select("svg");
var radius = 10;
var thickness = 4;
var speed = 0.05 * (radius + 20);
var arc = d3.svg.arc()
.startAngle(0)
.innerRadius(radius - thickness)
.outerRadius(radius)
svg.append("path")
.attr("transform", "translate(60, 60)")
.attr("d", arc.endAngle(2*Math.PI))
.classed("bg", true)
svg.append("g")
.attr("transform", "translate(60, 60)")
.append("path")
.attr("d", arc.endAngle(0.67*Math.PI))
.style("-webkit-animation-duration", speed + "s")
.classed("fg", true)
#display {
background-color: white
}
.bg {
fill: #dcdcdc
}
.fg {
fill: #7D8F95;
-webkit-animation-name: rotate;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment