Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #14898 from calixteman/progress

Browse Source 
[api-minor] Use a CSS transform to update the progress bar instead of changing the width (bug 1768481)
This commit is contained in:
Jonas Jenwald 2022-05-15 18:18:08 +02:00 committed by GitHub
commit 60e9065bf6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
examples/mobile-viewer/viewer.css
View File

@ -200,27 +200,29 @@ canvas {
#loadingBar .progress { #loadingBar .progress {
position: absolute; position: absolute;
left: 0; left: 0;
width: var(--progressBar-percent); width: 100%;
transform: scaleX(var(--progressBar-percent));
transform-origin: 0 0;
height: 100%; height: 100%;
background-color: rgba(221, 221, 221, 1); background-color: rgba(221, 221, 221, 1);
overflow: hidden; overflow: hidden;
transition: width 200ms; transition: transform 200ms;
} }
@keyframes progressIndeterminate { @keyframes progressIndeterminate {
0% { 0% {
left: 0; transform: translateX(0%);
} }
50% { 50% {
left: 100%; transform: translateX(100%);
} }
100% { 100% {
left: 100%; transform: translateX(100%);
} }
} }
#loadingBar .progress.indeterminate { #loadingBar .progress.indeterminate {
width: 100%; transform: none;
background-color: rgba(153, 153, 153, 1); background-color: rgba(153, 153, 153, 1);
transition: none; transition: none;
} }

12
web/viewer.css
View File

@ -362,24 +362,26 @@ select {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: var(--progressBar-percent); width: 100%;
transform: scaleX(var(--progressBar-percent));
transform-origin: 0 0;
height: 100%; height: 100%;
background-color: var(--progressBar-color); background-color: var(--progressBar-color);
overflow: hidden; overflow: hidden;
transition: width 200ms; transition: transform 200ms;
} }
@keyframes progressIndeterminate { @keyframes progressIndeterminate {
0% { 0% {
left: -142px; transform: translateX(-142px);
} }
100% { 100% {
left: 0; transform: translateX(0);
} }
} }
#loadingBar .progress.indeterminate { #loadingBar .progress.indeterminate {
width: 100%; transform: none;
background-color: var(--progressBar-indeterminate-bg-color); background-color: var(--progressBar-indeterminate-bg-color);
transition: none; transition: none;
} }