diff --git a/app/fileReceiver.js b/app/fileReceiver.js index b3b5502e..cd80002d 100644 --- a/app/fileReceiver.js +++ b/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]), diff --git a/app/fileSender.js b/app/fileSender.js index e9a86c5a..a6cbc0a5 100644 --- a/app/fileSender.js +++ b/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]), diff --git a/app/pages/download/index.js b/app/pages/download/index.js index 149eca10..73857dfb 100644 --- a/app/pages/download/index.js +++ b/app/pages/download/index.js @@ -24,7 +24,7 @@ module.exports = function(state, emit) {
${state.translate('downloadingPageMessage')}
- ${progress(transfer.progressRatio)} + ${progress(transfer.progressRatio, transfer.progressIndefinite)}
${state.translate(transfer.msg, transfer.sizes)} diff --git a/app/pages/upload/index.js b/app/pages/upload/index.js index 7d5f7d76..81353e0f 100644 --- a/app/pages/upload/index.js +++ b/app/pages/upload/index.js @@ -14,7 +14,7 @@ module.exports = function(state, emit) { })}
- ${progress(transfer.progressRatio)} + ${progress(transfer.progressRatio, transfer.progressIndefinite)}
${state.translate(transfer.msg, transfer.sizes)} diff --git a/app/templates/progress/index.js b/app/templates/progress/index.js index 74e273d0..5a89cd7e 100644 --- a/app/templates/progress/index.js +++ b/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` + + ${percent(progressRatio)} + `; + return html`
- - ${percentComplete} - + ${indefinite ? '' : progressPercent}
`; diff --git a/app/templates/progress/progress.css b/app/templates/progress/progress.css index e3856322..1d320515 100644 --- a/app/templates/progress/progress.css +++ b/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;