diff --git a/html/main.ejs b/html/main.ejs
index eb750072..f0d8934a 100644
--- a/html/main.ejs
+++ b/html/main.ejs
@@ -172,7 +172,27 @@ summary:hover{
   margin-top: -7px;
   padding: 2px;
     }
-    
+      
+.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;
+}
     .video > .info > .title {
   color: var(--text-primary) !important;
   font-weight: bold;
@@ -314,6 +334,10 @@ border:solid;
   <body>
 
  <div class="app" style="background-color: var(--channel-contents-background);">
+    <div class="progress-container">
+  <div class="progress-bar"></div>
+</div>
+   
    <div style="position: inherit;background: red;margin: -1em;">
    <p style="color: black;margin-right: auto;margin-left: auto;width: fit-content;">
          A magnitude 7.4 earthquake just hit Türkiye's Kahramanmaras province, please donate to the turkish people via: <a href="https://www.kizilay.org.tr/Bagis/BagisYap/215/afet-acil-durum-bagisi" style="color:black">Here </a> | to see latest news check <a href="https://poketube.fun/search?query=turkey+earthquake+news" style="color:black"> poketube</a> or <a href="https://duckduckgo.com/?q=turkey+earthquake&iar=news&ia=news" style="color:black">duckduckgo</a>
@@ -349,6 +373,7 @@ border:solid;
       </nav>
   
   
+  
 
  <div class="channel-page" >   
   
@@ -464,7 +489,54 @@ P.S : Ur a qt
                 
  
   <script src="/css/custom-css.js"> </script>
+   <script>
+        // @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-3.0-or-later  
 
+  document.addEventListener('DOMContentLoaded', function() {
+  let bgs = document.querySelectorAll('[data-bg]');
+  let bgCount = bgs.length;
+  
+  function loadBg(index) {
+    let bg = bgs[index];
+    let bgUrl = bg.getAttribute('data-bg');
+    bg.style.backgroundImage = `url(${bgUrl})`;
+    bg.removeAttribute('data-bg');
+    bg.classList.add('loaded');
+  }
+
+  function lazyLoadBg() {
+    for (let i = 0; i < bgCount; i++) {
+      let bg = bgs[i];
+      let bgRect = bg.getBoundingClientRect();
+      if (bgRect.top < window.innerHeight && bgRect.bottom > 0) {
+        loadBg(i);
+      }
+    }
+  }
+  
+  lazyLoadBg();
+  
+  window.addEventListener('scroll', lazyLoadBg);
+  window.addEventListener('resize', lazyLoadBg);
+});    
+
+// 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>
     </body >
 
 </html>
