I want to modify the top progress bar line when a page is loading just like youtube and github which have red and blue line at the top respectively when they are loading. Is it possible to do it with pure js?
You got to make sure that your data is loaded asynchronously after your main page is loaded. Your main page has to include that progress bar to which you feed the progress of your async load-data requests. In order to display a realistig loading behaviour you need to chain multiple load calls in order to react to these responses and fill your progress bar respetivly.
For frontend it is possible to achieve that with pure js... But your backend needs to serve your website, data, etc. one after another.