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 show end-users an indication that something will happen. 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 requires first loading a large JavaScript file, there will be a delay of a few hundred milliseconds before anything is rendered to the screen for most users. End users will see the loading indicator until that 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.