Blank page with CSS loader

If you are creating a custom page that loads a lot of content or external dependencies, it is nice to give end users an indication that something is happening. This recipe is for a blank page that renders a loading animation in pure CSS. This animation will run indefinitely, so your customization will need to remove the loading indicator and insert your page content after the loading is completed.

You can see an example of this blank page integrated into the recipe for Mirador 3. Because Mirador 3 first loads a large JavaScript file, most users will experience a delay of a few hundred milliseconds before anything is rendered to the screen. End users will see the loading indicator until it has completed. Once Mirador’s JS file has loaded, the CSS animated loader is removed, and the Mirador viewer is rendered into the blank page.