Building a non-blocking page loader

By “page loader”, I mean some intermediary screen, with or without animated shapes, you can add to your website to make some transition between pages or before page loads.

There is an extensive range of snippets and tutorials to build loaders, but it’s sometimes terrible in terms of accessibility.

You might say don’t even add such animated screen, but let’s do it. A progressive approach should probably take into account several cases like:

While it’s not that hard to achieve, many websites don’t bother, and it’s a bit lame, to me.

What I like to do is:

  1. hiding the animated screen by default
  2. displaying the animation only if the user has no motion preferences: @media (prefers-reduced-motion: no-preference) {}
  3. removing the screen after a few seconds with JavaScript

Be aware I don’t pretend it’s the best approach out there, but it works at least.

Maybe you can go even further and provide an opt-out to your visitors, like:

disable the annoying loading screen? y/n