Merge pull request #777 from mozilla/i771

use a separate circle in the progress svg for indefinite progress
This commit is contained in:
Danny Coates 2018-02-28 09:02:54 -08:00 committed by GitHub
commit 5c0cfdcf38
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 1 deletions

View File

@ -28,7 +28,16 @@ module.exports = function(progressRatio, indefinite = false) {
cy="${oRadius}"
fill="transparent"/>
<circle
class="${indefinite ? 'progress__indefinite' : 'progress__bar'}"
class="progress__indefinite ${indefinite ? '' : 'progress--invisible'}"
r="${radius}"
cx="${oRadius}"
cy="${oRadius}"
fill="transparent"
transform="rotate(-90 ${oRadius} ${oRadius})"
stroke-dasharray="${circumference}"
stroke-dashoffset="${dashOffset}"/>
<circle
class="progress__bar ${indefinite ? 'progress--invisible' : ''}"
r="${radius}"
cx="${oRadius}"
cy="${oRadius}"

View File

@ -37,3 +37,7 @@
line-height: 58px;
user-select: none;
}
.progress--invisible {
display: none;
}