Page load progress bar

Hi there,

I’d never normally use a progress bar but I’m working on portfolio page so I’ll just adding a few bells and whistles to make it a bit more interesting. So I decided to add a horizontal bar that animates left to right across the top page while the content loads. To do this I decided to use pace.js (

Checking this on a Mac in the Chrome, Safari, Firefox and Opera, everything worked as it should. However I’ve just looked in Internet Explorer (mainly 8 + 9) and I get a blank white page. I realised the page content displayed when I removed the Modernizr script, so I investigated further I realised this was by removing that script it prevented .no-js from being stripped off the html tag, so my ‘no javascript’ fallback kicked in. Which must mean, when active the following CSS is causing the issue:

.page { opacity: 0;}
.pace-done .page { opacity: 1;}

So I guess the browser gets stuck and opacity: 1; doesn’t kicks in.

However, checking Developer Tools in IE it does look as though the class is added. So I guess there’s something IE doesn’t like with the javascript file. What’s also strange is, if you leave the page long enough, it does appear. Or even shut down my VMWare virtual machine, if I open it back up the page is visible. If I refresh the page, it’s a white page again.

Has anyone had an experience with this plugin and can shed any light on it? I know IE8/9 aren’t too relevant now (or at least we like to think so) but I as actually at a clients and they tried to load my website in IE and it didn’t work - which is when the issue came to my attention!

I’m happy to use a different plugin or script is anyone can advise something else or more up to date. But as my pages have quite a lot of images I would like the page the page load a bit more graceful.

Hope someone can shed some light on this or advice another method.

Thanks in advance!

Hi @moymadethis, I do not have experience with that plugin, but what you’re saying suggests IE8 and 9 have a JavaScript error. You can find more by checking in the developer console in those browsers for JavaScript errors.
The page is initially set to have opacity 0, then there would be some script that adds the class ‘pace-done’ to the HTML element once the content has finished loading so that it shows. What is most surely happening is that before the script gets there, there is a JavaScript error that is preventing further execution.

Hope that helps

1 Like

Hey, thanks for the reply @Andres_Vaquero! Yeah I figured it was a JS error, I just don’t know what it is or how to fix it. The consoles in IE8/9 aren’t anywhere near as good as Chrome so I doubt I can find any definitive information.

Maybe I need to look at another solution/a different plugin that provides a similar effect? I did try messaging the people who made it but I guess they’re no longer supporting it as I didn’t get a response.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.