diff --git a/web/ui_utils.js b/web/ui_utils.js index 4d007703d0b0a..8929b33dcb770 100644 --- a/web/ui_utils.js +++ b/web/ui_utils.js @@ -23,6 +23,8 @@ const MAX_AUTO_SCALE = 1.25; const SCROLLBAR_PADDING = 40; const VERTICAL_PADDING = 5; +const LOADINGBAR_END_OFFSET_VAR = "--loadingBar-end-offset"; + const PresentationModeState = { UNKNOWN: 0, NORMAL: 1, @@ -940,7 +942,8 @@ class ProgressBar { const container = viewer.parentNode; const scrollbarWidth = container.offsetWidth - viewer.offsetWidth; if (scrollbarWidth > 0) { - this.bar.style.width = `calc(100% - ${scrollbarWidth}px)`; + const doc = document.documentElement; + doc.style.setProperty(LOADINGBAR_END_OFFSET_VAR, `${scrollbarWidth}px`); } } @@ -950,7 +953,6 @@ class ProgressBar { } this.visible = false; this.bar.classList.add("hidden"); - document.body.classList.remove("loadingInProgress"); } show() { @@ -958,7 +960,6 @@ class ProgressBar { return; } this.visible = true; - document.body.classList.add("loadingInProgress"); this.bar.classList.remove("hidden"); } } diff --git a/web/viewer.css b/web/viewer.css index 18c3d7828d19c..fef213d9ae77e 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -19,6 +19,7 @@ --sidebar-width: 200px; --sidebar-transition-duration: 200ms; --sidebar-transition-timing-function: ease; + --loadingBar-end-offset: 0; --toolbar-icon-opacity: 0.7; --doorhanger-icon-opacity: 0.9; @@ -253,10 +254,6 @@ html[dir="rtl"] #sidebarContainer { right: calc(0px - var(--sidebar-width)); } -.loadingInProgress #sidebarContainer { - top: 36px; -} - #outerContainer.sidebarResizing #sidebarContainer { /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */ transition-duration: 0s; @@ -406,11 +403,35 @@ html[dir="rtl"] #toolbarContainer, } #loadingBar { - position: relative; - width: 100%; + position: absolute; height: 4px; background-color: var(--body-bg-color); border-bottom: 1px solid var(--toolbar-border-color); + + transition-duration: var(--sidebar-transition-duration); + transition-timing-function: var(--sidebar-transition-timing-function); +} +html[dir="ltr"] #loadingBar { + transition-property: left; + left: 0; + right: var(--loadingBar-end-offset); +} +html[dir="rtl"] #loadingBar { + transition-property: right; + left: var(--loadingBar-end-offset); + right: 0; +} + +html[dir="ltr"] #outerContainer.sidebarOpen #loadingBar { + left: var(--sidebar-width); +} +html[dir="rtl"] #outerContainer.sidebarOpen #loadingBar { + right: var(--sidebar-width); +} + +#outerContainer.sidebarResizing #loadingBar { + /* Improve responsiveness and avoid visual glitches when the sidebar is resized. */ + transition-duration: 0s; } #loadingBar .progress { @@ -1485,9 +1506,6 @@ html[dir="rtl"] .treeItemToggler::before { z-index: 1000; padding: 3px 6px; } -.loadingInProgress #errorWrapper { - top: 37px; -} #errorMessageLeft { float: left; diff --git a/web/viewer.html b/web/viewer.html index 0bef5178baa11..e9cf7e3b6f71c 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -71,7 +71,7 @@ - +