added indefinite progress mode
This commit is contained in:
parent
099012fac9
commit
03f08de32f
|
@ -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]),
|
||||
|
|
|
@ -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]),
|
||||
|
|
|
@ -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)}
|
||||
|
|
|
@ -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)}
|
||||
|
|
|
@ -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>
|
||||
`;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue