Website mein beautiful progress bar kaise add Karen

अपनी वेबसाइट में प्रोग्रेस बार कैसे लगाएं 

तो चलिए जानते हैं एक ब्यूटीफुल स्क्रोल बर अपनी वेबसाइट में कैसे ऐड करें 

   <div class="progress-container">
  <div class="progress-bar"></div>
    </div>
  
  

<style>
      .progress-container {
            position: fixed;
            width: 100%;
            height: 5px;
            top: 0;
            left: 0;
            z-index: 99;
        }
        .progress-bar {
            height: 5px;
            width: 0%;
            background: linear-gradient(to right, blue, red);
        }        
    </style> 

कस डाल लेने के बाद आपको जावास्क्रिप्ट कोड ऐड करना पड़ेगा जो कि आपको क्लोज बॉडी के ऊपर डालना होता है तो आपको बस नीचे वाला जीएस कोड कॉपी करके अपने क्लोज बॉडी टाइप के ऊपर पेस्ट कर देना है 

<script>
        window.onscroll = function() {scrollProgress()};

        function scrollProgress() {
            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            const scrolled = (winScroll / height) * 100;
            document.querySelector('.progress-bar').style.width = scrolled + "%";
        }
    </script>