factored out progress into progress.js

frontend/src/progress.js

@@ -0,0 +1,41 @@
+const { bytes } = require('./utils');
+const $ = require('jquery');
+require('jquery-circle-progress');
+
+let $progress = null;
+let $percent = null;
+let $text = null;
+
+document.addEventListener('DOMContentLoaded', function() {
+  $percent = $('.percent-number');
+  $text = $('.progress-text');
+  $progress = $('.progress-bar');
+  $progress.circleProgress({
+    value: 0.0,
+    startAngle: -Math.PI / 2,
+    fill: '#3B9DFF',
+    size: 158,
+    animation: { duration: 300 }
+  });
+});
+
+function setProgress(params) {
+  const percent = params.complete / params.total;
+  $progress.circleProgress('value', percent);
+  $percent.text(`${Math.floor(percent * 100)}`);
+  document.l10n
+    .formatValue('fileSizeProgress', {
+      partialSize: bytes(params.complete),
+      totalSize: bytes(params.total)
+    })
+    .then(setText);
+}
+
+function setText(str) {
+  $text.text(str);
+}
+
+module.exports = {
+  setProgress,
+  setText
+};