segmented progress bar

comic_reader.css

@@ -136,6 +136,7 @@
 
 #reader-progress-container {
     background-color: dimgray;
+    position: relative;
 }
 
 #reader-progress-bar{
@@ -143,4 +144,20 @@
     background-color: whitesmoke;
     width: 0%;
     transition: all 0.5s ease-in-out;
+}
+
+#reader-progress-pages {
+    display: flex;
+    height: 100%;
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 0;
+}
+
+#reader-progress-pages > * {
+    height: 100%;
+    box-sizing: border-box;
+    border-right: 0.3em black solid;
+    flex: 1;
 }

comic_reader.js

@@ -28,6 +28,7 @@ FOCUS_OVERLAY = document.getElementById("focus-overlay")
 HELP_CONTROLS = document.getElementById("help-controls")
 PROGRESS_BAR_CONTAINER = document.getElementById("reader-progress-container")
 PROGRESS_BAR = document.getElementById("reader-progress-bar")
+PROGRESS_BAR_PAGES = document.getElementById("reader-progress-pages")
 
 CURRENT_ZOOM = 0
 CURRENT_PAGE = 1
@@ -162,6 +163,8 @@ function initReader(){
         let img = READER_PAGES.children[i];
         img.style.width = 100 / getPagesCount() + "%"
         visibilityObserver.observe(img)
+        
+        PROGRESS_BAR_PAGES.appendChild(document.createElement("div"))
     }
     
     READER_PAGES.style.display = "flex"

comic_reader_test_high_res.html

@@ -56,6 +56,7 @@
             
             <div id="reader-progress-container">
                 <div id="reader-progress-bar"></div>
+                <div id="reader-progress-pages"></div>
             </div>
         </div>
     

comic_reader_test_low_res.html

@@ -56,6 +56,7 @@
             
             <div id="reader-progress-container">
                 <div id="reader-progress-bar"></div>
+                <div id="reader-progress-pages"></div>
             </div>
         </div>