(function() {
  let percent =  100.00
      lang = 'CZ'
  let svg = d3.select('#progress')
    .append('svg')
    .attr('height', 100)
    .attr('width', 110)
  svg.append('rect')
    .attr('class', 'bg-rect')
    .attr('fill', 'white')
    .attr('height', 50)
    .attr('stroke', 'gray')
    .attr('width', 100)
    .attr('x', 10)
    .style('fill', '#ececec')
  svg.append('rect')
    .attr('class', 'progress-rect')
    .attr('fill', '#0059A9')
    .attr('height', 50)
    .attr('width', 0)
    .attr('x', 10)
    .transition()
    .duration(1000)
    .ease(d3.easeLinear)
    .attr('width', percent)
    .call(tween)
  function tween(transition) {
    let progressCount = d3.select("#progressCount").append('text')
    transition.attrTween("d", function(d) {
      let interpolateCount = d3.interpolate(0, percent)
      return function(t) {
        progressCount.text(interpolateCount(t).toFixed(2).replace(/\./g, lang === "CZ" ? ',' : '.') + ' %')
      }
    })
  }
})()