ptvans/_.md

## _.md

      
    Raw
  

              _.md
            
          
    [ Launch: looping loader ] 6056229 by ptvans
[ Launch: looping loader ] 5818931 by enjalot


## config.json
{"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},"index.html":{"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/rOoeil7.png"}

## index.html
<!DOCTYPE html>
<head>
</head>
<body>

  hello

</body>
</html>

## inlet.js
var svg = d3.select("svg");

var radius = 90;
var thickness = 24;

var speed = 0.02 * (radius + 20);

var arc = d3.svg.arc()
  .startAngle(0)
  .innerRadius(radius - thickness)
  .outerRadius(radius);

svg.append("path")
  .attr("transform", "translate(100, 100)")
  .attr("d", arc.endAngle(2*Math.PI))
  .classed("bg", true);

svg.append("g")
  .attr("transform", "translate(100, 100)")
  .append("path")
  .attr("d", arc.endAngle(0.67*Math.PI))
  .style({
      "animation-duration": speed + "s",
      "-ms-animation-duration": speed + "s",
      "-webkit-animation-duration": speed + "s"
      })
  .classed("fg", true);

svg.append("text")
	.text("shoveling coal")
	.attr("transform", "translate("+ 39 +", "+ 106 +")")
	.classed("message", true);


## style.css
#display {
  background-color: #444;
}


.message {
  fill: #DB465C;
}

.bg {
  fill: #fff;
}

.fg {
  fill: #DB465C;
  animation-name: rotate;
  animation-iteration-count:  infinite;
  animation-timing-function: linear;
  -ms-animation-name: rotate;
  -ms-animation-iteration-count:  infinite;
  -ms-animation-timing-function: linear;
  -webkit-animation-name: rotate;
  -webkit-animation-iteration-count:  infinite;
  -webkit-animation-timing-function: linear;

}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-ms-keyframes rotate {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
	var svg = d3.select("svg");

	var radius = 90;
	var thickness = 24;

	var speed = 0.02 * (radius + 20);

	var arc = d3.svg.arc()
	.startAngle(0)
	.innerRadius(radius - thickness)
	.outerRadius(radius);

	svg.append("path")
	.attr("transform", "translate(100, 100)")
	.attr("d", arc.endAngle(2*Math.PI))
	.classed("bg", true);

	svg.append("g")
	.attr("transform", "translate(100, 100)")
	.append("path")
	.attr("d", arc.endAngle(0.67*Math.PI))
	.style({
	"animation-duration": speed + "s",
	"-ms-animation-duration": speed + "s",
	"-webkit-animation-duration": speed + "s"
	})
	.classed("fg", true);

	svg.append("text")
	.text("shoveling coal")
	.attr("transform", "translate("+ 39 +", "+ 106 +")")
	.classed("message", true);
	#display {
	background-color: #444;
	}


	.message {
	fill: #DB465C;
	}

	.bg {
	fill: #fff;
	}

	.fg {
	fill: #DB465C;
	animation-name: rotate;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	-ms-animation-name: rotate;
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function: linear;
	-webkit-animation-name: rotate;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;

	}

	@keyframes rotate {
	from {
	transform: rotate(0deg);
	}
	to {
	transform: rotate(360deg);
	}
	}

	@-ms-keyframes rotate {
	from {
	-ms-transform: rotate(0deg);
	}
	to {
	-ms-transform: rotate(360deg);
	}
	}

	@-webkit-keyframes rotate {
	from {
	-webkit-transform: rotate(0deg);
	}
	to {
	-webkit-transform: rotate(360deg);
	}
	}