diff --git a/app/src/main/assets/viewer.css b/app/src/main/assets/viewer.css
index 9f136d5aa..e975721f6 100644
--- a/app/src/main/assets/viewer.css
+++ b/app/src/main/assets/viewer.css
@@ -79,3 +79,14 @@ body {
.textLayer .endOfContent.active {
top: 0;
}
+
+#loading-bar-container {
+ width: 100%;
+ background-color: #bbdefb;
+}
+
+#loading-bar {
+ width: 0%;
+ height: 4px;
+ background-color: #106cc8;
+}
\ No newline at end of file
diff --git a/app/src/main/assets/viewer.html b/app/src/main/assets/viewer.html
index c4f1125b5..c41db1193 100644
--- a/app/src/main/assets/viewer.html
+++ b/app/src/main/assets/viewer.html
@@ -7,6 +7,9 @@
+
diff --git a/app/src/main/assets/viewer.js b/app/src/main/assets/viewer.js
index 0e04afa4f..2a747e0ad 100644
--- a/app/src/main/assets/viewer.js
+++ b/app/src/main/assets/viewer.js
@@ -19,6 +19,25 @@ let useRender;
const cache = [];
const maxCached = 6;
+var loading_bar = document.getElementById("loading-bar");
+var loading_bar_container = document.getElementById("loading-bar-container");
+
+function show_progress_bar() {
+ loading_bar.style.display = "block";
+ loading_bar_container.style.display = "block";
+}
+
+function hide_progress_bar() {
+ loading_bar.style.display = "none";
+ loading_bar_container.style.display = "none";
+}
+
+function set_progress(value) {
+ if(value==0) show_progress_bar();
+ else if(value==100) hide_progress_bar();
+ else loading_bar.style.width = value + "%";
+}
+
function maybeRenderNextPage() {
if (renderPending) {
pageRendering = false;
@@ -209,6 +228,14 @@ function loadDocument() {
}
}
+ loadingTask.onProgress = function(data){
+ var progress = Math.ceil((data.loaded/data.total)*100);
+ console.log("Progress: " + progress);
+ set_progress(progress);
+ }
+
+ show_progress_bar();
+
loadingTask.promise.then(function (newDoc) {
pdfDoc = newDoc;
channel.setNumPages(pdfDoc.numPages);
@@ -218,7 +245,9 @@ function loadDocument() {
console.log("getMetadata error: " + error);
});
renderPage(channel.getPage(), false, false);
+ hide_progress_bar();
}, function (reason) {
+ hide_progress_bar();
console.error(reason.name + ": " + reason.message);
});
}