Merge pull request #764 from mozilla/prog

added indefinite progress mode

app/fileReceiver.js

@@ -18,6 +18,10 @@ export default class FileReceiver extends Nanobus {
     return this.progress[0] / this.progress[1];
   }
 
+  get progressIndefinite() {
+    return this.state !== 'downloading';
+  }
+
   get sizes() {
     return {
       partialSize: bytes(this.progress[0]),

app/fileSender.js

@@ -20,6 +20,10 @@ export default class FileSender extends Nanobus {
     return this.progress[0] / this.progress[1];
   }
 
+  get progressIndefinite() {
+    return ['fileSizeProgress', 'notifyUploadDone'].indexOf(this.msg) === -1;
+  }
+
   get sizes() {
     return {
       partialSize: bytes(this.progress[0]),

app/pages/download/index.js

@@ -24,7 +24,7 @@ module.exports = function(state, emit) {
       <div class="description">
         ${state.translate('downloadingPageMessage')}
       </div>
-      ${progress(transfer.progressRatio)}
+      ${progress(transfer.progressRatio, transfer.progressIndefinite)}
       <div class="progressSection">
         <div class="progressSection__text">
           ${state.translate(transfer.msg, transfer.sizes)}

app/pages/upload/index.js

@@ -14,7 +14,7 @@ module.exports = function(state, emit) {
       })}
     </div>
     <div class="description"></div>
-    ${progress(transfer.progressRatio)}
+    ${progress(transfer.progressRatio, transfer.progressIndefinite)}
     <div class="progressSection">
       <div class="progressSection__text">
         ${state.translate(transfer.msg, transfer.sizes)}

app/templates/progress/index.js

@@ -6,9 +6,14 @@ const oRadius = radius + 10;
 const oDiameter = oRadius * 2;
 const circumference = 2 * Math.PI * radius;
 
-module.exports = function(progressRatio) {
-  const dashOffset = (1 - progressRatio) * circumference;
-  const percentComplete = percent(progressRatio);
+module.exports = function(progressRatio, indefinite = false) {
+  const p = indefinite ? 0.2 : progressRatio;
+  const dashOffset = (1 - p) * circumference;
+  const progressPercent = html`
+    <text class="progress__percent" text-anchor="middle" x="50%" y="98">
+      ${percent(progressRatio)}
+    </text>`;
+
   return html`
   <div class="progress">
     <svg
@@ -23,7 +28,7 @@ module.exports = function(progressRatio) {
         cy="${oRadius}"
         fill="transparent"/>
       <circle
-        class="progress__bar"
+        class="${indefinite ? 'progress__indefinite' : 'progress__bar'}"
         r="${radius}"
         cx="${oRadius}"
         cy="${oRadius}"
@@ -31,9 +36,7 @@ module.exports = function(progressRatio) {
         transform="rotate(-90 ${oRadius} ${oRadius})"
         stroke-dasharray="${circumference}"
         stroke-dashoffset="${dashOffset}"/>
-      <text class="progress__percent" text-anchor="middle" x="50%" y="98">
-        ${percentComplete}
-      </text>
+        ${indefinite ? '' : progressPercent}
     </svg>
   </div>
   `;

app/templates/progress/progress.css

@@ -18,6 +18,23 @@
   transition: stroke-dashoffset 300ms linear;
 }
 
+.progress__indefinite {
+  stroke: #3b9dff;
+  stroke-width: 0.75em;
+  animation: 1s linear infinite spin;
+  transform-origin: center;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .progress__percent {
   font-family: 'Segoe UI', 'SF Pro Text', sans-serif;
   font-size: 43.2px;