d3 progress bar

by Mariya Gnitetckaya

HTML

<span class="progress-bar" data-progress="86" data-color="green"></span>
<span class="progress-bar" data-progress="44" data-color="orange"></span>

<script src="https://d3js.org/d3.v4.min.js"></script>

JavaScript

var elements = document.querySelectorAll('.progress-bar');

[].forEach.call(elements, function(el, i){
	var progress = +el.dataset.progress;
  var color = el.dataset.color;
  var delay = i*300;
  var svg = d3.select(el)
          .append('svg:svg')
          .attr('width', "100%")
          .attr('height', '4px');

        svg.append("rect")
          .attr("class", "progress-back")
          .attr("x", 0)
          .attr("y", 0)
          .attr("width", "100%")
          .attr('height', '4px')
          .attr('fill', 'rgba(36, 46, 54, 0.15)')

         svg.append("rect")
          .attr("class", "progress")
          .attr('height', '4px')
          .attr("x", 0)
          .attr("y", 0)
          .attr("width", 0)
          .transition()
          .duration(2000)
          .delay(delay)
          .attr("width", progress + '%')
          .attr('fill', color)
        
})