drop.chapril.org-firefoxsend/app/templates/progress.js
2017-11-10 12:40:18 -08:00

30 lines
1012 B
JavaScript

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;
};