fox-send/app/templates/progress.js

const html = require('choo/html');

const radius = 73;
const oRadius = radius + 10;
const oDiameter = oRadius * 2;
const circumference = 2 * Math.PI * radius;

module.exports = function(progressRatio) {
  const dashOffset = (1 - progressRatio) * circumference;
  const percent = Math.floor(progressRatio * 100);
  const div = html`
  <div class="progress-bar">
    <svg
      id="progress"
      width="${oDiameter}"
      height="${oDiameter}"
      viewPort="0 0 ${oDiameter} ${oDiameter}"
      version="1.1">
      <circle
        r="${radius}"
        cx="${oRadius}"
        cy="${oRadius}"
        fill="transparent"/>
      <circle
        id="bar"
        r="${radius}"
        cx="${oRadius}"
        cy="${oRadius}"
        fill="transparent"
        transform="rotate(-90 ${oRadius} ${oRadius})"
        stroke-dasharray="${circumference}"
        stroke-dashoffset="${dashOffset}"/>
      <text class="percentage" text-anchor="middle" x="50%" y="98">
        <tspan class="percent-number">${percent}</tspan>
        <tspan class="percent-sign">%</tspan>
      </text>
    </svg>
  </div>
  `;
  return div;
};