color cycle progress

color-cycle-progress.markdown

color cycle progress

animated color cycle style progress bar

A Pen by Bryan on CodePen.

License.

script.js

var plotDimensionWidth = 400;
var plotDimensionHeight = 200;
var delay = 200;
var duration = 600;
var smallRadius = 10;

var svg = d3.select("body").append("svg")
    .attr("width",  plotDimensionWidth)
    .attr("height", plotDimensionHeight);

 var graphData = [
          {x:   50, y: 100 },
          {x:  100, y: 100 },
          {x:  150, y: 100 },
          {x:  200, y: 100 },
          {x:  250, y: 100 },
          {x:  300, y: 100 },
          {x:  350, y: 100 }
        ];

function render(data){
    var circles = svg.selectAll("circle").data(data);
    circles.enter().append("circle")
        .attr("r", smallRadius)
        .attr("stroke", "#000" )
        .attr("fill",  "#000"  )
        .attr("cx", function (d){ return d.x; })
        .attr("cy", function (d){ return d.y; });

    circles.exit().remove();
}

function cycle(data) {
 
  d3.select("svg")
            .selectAll("circle")
   
            .transition()
            .delay(function(d, i) { return delay * i; })
            .duration( duration )
            .attr("fill", "#f00")        
            .transition()
            .duration( duration )
            .attr("fill", "#000" );
}

render(graphData);

for(repeat = 0; repeat < 3; repeat++) {
  setTimeout(function(){cycle(graphData)},repeat * 2600);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

style.css

body {
				background-color: #4f4f4f;
			}
svg {
  background-color: white;
}