add progressbar owo

html/poketube.ejs

@@ -127,6 +127,28 @@
   }
 }
   
+.progress-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  z-index: 9999;
+  display:none;
+  background-color: #f2f2f2;
+}
+
+.progress-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0%;
+  height: 100%;
+  background-color: purple;
+  transition: width 0.5s ease-in-out;
+}
+
+
 .comments-area .thumb {
   margin-right: 20px;
 }
@@ -290,6 +312,10 @@
     .auto-play{
       display:none !important;
     }  
+    .progress-container {
+            display:none !important;
+
+    }
   </style>
   </noscript>
                     <% if (video.id == "QrGrOK8oZG8") { %> 
@@ -345,6 +371,9 @@ text-shadow: 1px 1px #000,1px 1px 0.1px #000;!important;
 //--><!]]>
 </script>
 <div class="app" id="secret-theme" style="color:var(--text-color)">
+ <div class="progress-container">
+  <div class="progress-bar"></div>
+</div>
 
 
     <nav>
@@ -1222,6 +1251,22 @@ if (/[?&]autoplay=/.test(location.search)) {
         location.href = "/watch?v=<%- k.Video.Recommendations.Video[0].id%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + k.Video.Recommendations.Video[0].id ) %>"
     }
 }
+
+// Get the progress bar and container elements
+const progressBar1 = document.querySelector(".progress-bar");
+const progressContainer1 = document.querySelector(".progress-container");
+
+// Set the initial width of the progress bar to 0%
+progressBar1.style.width = "0%";
+progressContainer1.style.display = 'block';
+
+// Attach an event listener to the window object to listen for the 'load' event
+window.addEventListener("load", () => {
+  progressBar1.style.width = "100%";
+  setTimeout(() => {
+    progressContainer1.style.display = 'none';
+  }, 500);
+});
 </script>
    
  <% if (!optout) { %>