use svg for progress

This commit is contained in:
Danny Coates 2017-08-13 11:02:27 -07:00
parent 43fa551a64
commit eada94b262
No known key found for this signature in database
GPG key ID: 4C442633C62E00CB
9 changed files with 36 additions and 36 deletions

View file

@ -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" id="dl-progress">
<div class="progress-bar">
<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>

View file

@ -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" id="ul-progress">
<div class="progress-bar">
<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>