Merge pull request #513 from mozilla/svg-progress

use svg for progress

frontend/src/download.js

@@ -5,7 +5,7 @@ import Storage from './storage';
 import * as links from './links';
 import * as metrics from './metrics';
 import * as progress from './progress';
-import $ from 'jquery';
+import $ from 'jquery/dist/jquery.slim';
 
 const storage = new Storage();
 function onUnload(size) {

frontend/src/fileList.js

@@ -2,7 +2,7 @@ import FileSender from './fileSender';
 import Storage from './storage';
 import * as metrics from './metrics';
 import { allowedCopy, copyToClipboard, ONE_DAY_IN_MS } from './utils';
-import $ from 'jquery';
+import $ from 'jquery/dist/jquery.slim';
 
 const storage = new Storage();
 let fileList = null;

frontend/src/main.css

@@ -22,6 +22,16 @@ body {
   position: relative;
 }
 
+#progress circle {
+  stroke: #eee;
+  stroke-width: 0.75em;
+}
+
+#progress #bar {
+  transition: stroke-dashoffset 300ms linear;
+  stroke: #3b9dff;
+}
+
 .header {
   align-items: flex-start;
   box-sizing: border-box;
@@ -420,7 +430,7 @@ tbody {
   position: absolute;
   letter-spacing: -0.78px;
   font-family: 'Segoe UI', 'SF Pro Text', sans-serif;
-  top: 53px;
+  top: 58px;
   left: 50%;
   transform: translateX(-50%);
   -moz-user-select: none;

frontend/src/progress.js

@@ -1,24 +1,18 @@
 import { bytes, percent } from './utils';
-import $ from 'jquery';
-import 'jquery-circle-progress';
 
-let $progress = null;
+let percentText = null;
-let $percent = null;
+let text = null;
-let $text = null;
 let title = null;
+let bar = null;
 let updateTitle = false;
 
+const radius = 73;
+const circumference = 2 * Math.PI * radius;
+
 document.addEventListener('DOMContentLoaded', function() {
-  $percent = $('.percent-number');
+  percentText = document.querySelector('.percent-number');
-  $text = $('.progress-text');
+  text = document.querySelector('.progress-text');
-  $progress = $('.progress-bar');
+  bar = document.getElementById('bar');
-  $progress.circleProgress({
-    value: 0.0,
-    startAngle: -Math.PI / 2,
-    fill: '#3B9DFF',
-    size: 158,
-    animation: { duration: 300 }
-  });
   title = document.querySelector('title');
 });
 
@@ -33,8 +27,8 @@ document.addEventListener('focus', function() {
 
 function setProgress(params) {
   const ratio = params.complete / params.total;
-  $progress.circleProgress('value', ratio);
+  bar.setAttribute('stroke-dashoffset', (1 - ratio) * circumference);
-  $percent.text(Math.floor(ratio * 100));
+  percentText.textContent = Math.floor(ratio * 100);
   if (updateTitle) {
     title.textContent = percent(ratio);
   }
@@ -47,7 +41,7 @@ function setProgress(params) {
 }
 
 function setText(str) {
-  $text.text(str);
+  text.textContent = str;
 }
 
 export { setProgress, setText };

frontend/src/upload.js

@@ -13,7 +13,7 @@ import Storage from './storage';
 import * as metrics from './metrics';
 import * as progress from './progress';
 import * as fileList from './fileList';
-import $ from 'jquery';
+import $ from 'jquery/dist/jquery.slim';
 
 const storage = new Storage();
 

package-lock.json

@@ -5266,15 +5266,6 @@
       "integrity": "sha1-XE2d5lKvbNCncBVKYxu6ErAVx4c=",
       "dev": true
     },
-    "jquery-circle-progress": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/jquery-circle-progress/-/jquery-circle-progress-1.2.2.tgz",
-      "integrity": "sha1-Jg6RMKyOK1Vy6qepO56Kaye8juo=",
-      "dev": true,
-      "requires": {
-        "jquery": "3.2.1"
-      }
-    },
     "js-base64": {
       "version": "2.1.9",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.1.9.tgz",

package.json

@@ -34,7 +34,6 @@
     "git-rev-sync": "^1.9.1",
     "husky": "^0.14.3",
     "jquery": "^3.2.1",
-    "jquery-circle-progress": "^1.2.2",
     "l20n": "^5.0.0",
     "lint-staged": "^4.0.3",
     "mocha": "^3.4.2",

views/download.handlebars

@@ -20,8 +20,11 @@
   <div id="download-progress" hidden="true">
     <div id="dl-title" class="title"></div>
     <div class="description" data-l10n-id="downloadingPageMessage"></div>
-    <!-- progress bar here -->
+    <div class="progress-bar">
-    <div class="progress-bar" id="dl-progress">
+      <svg id="progress" width="166" height="166" viewPort="0 0 166 166" version="1.1">
+        <circle r="73" cx="83" cy="83" fill="transparent"/>
+        <circle id="bar" r="73" cx="83" cy="83" fill="transparent" transform="rotate(-90 83 83)" stroke-dasharray="458.67" stroke-dashoffset="458.67"/>
+      </svg>
       <div class="percentage">
         <span class="percent-number"></span>
         <span class="percent-sign">%</span>

views/index.handlebars

@@ -37,8 +37,11 @@
 <div id="upload-progress" hidden="true">
   <div class="title" id="upload-filename"></div>
   <div class="description"></div>
-  <!-- progress bar here -->
+  <div class="progress-bar">
-  <div class="progress-bar" id="ul-progress">
+    <svg id="progress" width="166" height="166" viewPort="0 0 166 166" version="1.1">
+      <circle r="73" cx="83" cy="83" fill="transparent"/>
+      <circle id="bar" r="73" cx="83" cy="83" fill="transparent" transform="rotate(-90 83 83)" stroke-dasharray="458.67" stroke-dashoffset="458.67"/>
+    </svg>
     <div class="percentage">
       <span class="percent-number">0</span>
       <span class="percent-sign">%</span>