loading indicator

_.md

[ Launch: loading indicator ] 9944137 by roundrobin
[ Launch: sin waves ] 9943424 by roundrobin

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false},"description":"loading indicator","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"test.css":{"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/4thkCQN.png","ajax-caching":true}

inlet.js

var group = g.append("g")
.attr({
  "class": "char"
})
var circ = group.append("circle")
.attr({
  "r" : 40,
  "cx" : 200,
  "cy" : 200,
  "fill": "#ff00ff"
});

test.css

@-webkit-keyframes glow {
    0% { -webkit-transform: scale(1); }
    100% { -webkit-transform: scale(1.5); }
}  

.char {
	-webkit-animation-name: glow;
	-webkit-animation-duration: 0.8s;
	-webkit-animation-timing-function: cubic-bezier(0.330, 0.005, 0.575, 0.995);
	-webkit-animation-iteration-count: 20;
	-webkit-animation-direction: alternate;
	-webkit-animation-fill-mode:forwards;
  	-webkit-transform-origin: 50%;
}