IgorDePaula/load progress with d3

## load progress with d3
<!DOCTYPE html>
<head>
    <meta HTTP-EQUIV="X-UA-COMPATIBLE" CONTENT="IE=EmulateIE9" >
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <style>

        .progress-meter .background {
            fill: #ccc;
        }

        .progress-meter .foreground {
            fill: #000;
        }

        .progress-meter text {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 24px;
            font-weight: bold;
        }

    </style>
<body></body>

<script>
  var width = 320,
            height = 170,
            twoPi = 2 * Math.PI,
            progress = 0,
            total = 100, // must be hard-coded if server doesn't report Content-Length
            formatPercent = d3.format(".0%");

    var arc = d3.svg.arc()
            .startAngle(0)
            .innerRadius(60)
            .outerRadius(80);

    var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var meter = svg.append("g")
            .attr("class", "progress-meter");

    meter.append("path")
            .attr("class", "background")
            .attr("d", arc.endAngle(twoPi));

    var foreground = meter.append("path")
            .attr("class", "foreground");

    var text = meter.append("text")
            .attr("text-anchor", "middle")
            .attr("dy", ".35em");
    var i = d3.interpolate(progress, 85 / total);
    d3.transition().tween("progress", function() {
        return function(t) {
            progress = i(t);
            foreground.attr("d", arc.endAngle(twoPi * progress));
            text.text(formatPercent(progress));
        };
    });
   /* var width = 960,
            height = 500;
    var arc = d3.svg.arc()
  .innerRadius(100)
  .outerRadius(150);

var data = [21, 32, 35, 64, 83];

var color = d3.scale.category10();

var pie = d3.layout.pie();
var arcData = pie(data);

d3.select('body').append('svg')
.attr("width", width)
            .attr("height", height)
  .append('g').attr('transform', 'translate(200, 175)')
    .selectAll('path').data(arcData).enter()
      .append('path').attr('d', arc).style('fill', function(d, i){
        return color(i);
      });*/

</script>
	<!DOCTYPE html>
	<head>
	<meta HTTP-EQUIV="X-UA-COMPATIBLE" CONTENT="IE=EmulateIE9" >
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style>

	.progress-meter .background {
	fill: #ccc;
	}

	.progress-meter .foreground {
	fill: #000;
	}

	.progress-meter text {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-weight: bold;
	}

	</style>
	<body></body>

	<script>
	var width = 320,
	height = 170,
	twoPi = 2 * Math.PI,
	progress = 0,
	total = 100, // must be hard-coded if server doesn't report Content-Length
	formatPercent = d3.format(".0%");

	var arc = d3.svg.arc()
	.startAngle(0)
	.innerRadius(60)
	.outerRadius(80);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	var meter = svg.append("g")
	.attr("class", "progress-meter");

	meter.append("path")
	.attr("class", "background")
	.attr("d", arc.endAngle(twoPi));

	var foreground = meter.append("path")
	.attr("class", "foreground");

	var text = meter.append("text")
	.attr("text-anchor", "middle")
	.attr("dy", ".35em");
	var i = d3.interpolate(progress, 85 / total);
	d3.transition().tween("progress", function() {
	return function(t) {
	progress = i(t);
	foreground.attr("d", arc.endAngle(twoPi * progress));
	text.text(formatPercent(progress));
	};
	});
	/* var width = 960,
	height = 500;
	var arc = d3.svg.arc()
	.innerRadius(100)
	.outerRadius(150);

	var data = [21, 32, 35, 64, 83];

	var color = d3.scale.category10();

	var pie = d3.layout.pie();
	var arcData = pie(data);

	d3.select('body').append('svg')
	.attr("width", width)
	.attr("height", height)
	.append('g').attr('transform', 'translate(200, 175)')
	.selectAll('path').data(arcData).enter()
	.append('path').attr('d', arc).style('fill', function(d, i){
	return color(i);
	});*/

	</script>