CSS only loading progress indicator, loader

Excerpt

Robust low-code implementation of a loader.

Implementing a loading indicator is required when web application need a long time to load and start executing in the browser. One topic that is special to loading indicators is that they must show up even before the page is loaded completely.

Implementing a loader

Loaders must appear as soon as possible to make the visitor aware of ongoing loading or ongoing backend service calls.

Using a HTML Object that is located near the start of the page, in-page CSS and avoiding any external dependencies like external style sheets, image files or external scripting is the best option to achieve this. This version of a loader doesn't use javascript to be shown but javascript must be used to stop the loader after loading has been done.

There are many solutions described on how to implement a loader showing that users must wait. One of the smaller implementations using css calc() function for positioning and css transform animation for the spinning symbol is used here.

This avoids that loading an image is required before showing the loader.

HTML code

The HTML code should be the first code after the opening body element:

<div class="loader"></div>

CSS code

.loader {
  position: fixed;
  width: 5em;
  height: 5em;
  left: calc(50% - 2.5em);
  top: calc(50% - 2.5em);
  z-index: 99;
  border: 1em solid currentColor;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: turn 1s linear infinite;
}

@keyframes turn {
  0% {transform: rotate(0);}
  100% {transform: rotate(1turn);}
}

Scripting code

To remove the loader after the page is fully loaded some script is needed:

window.addEventListener("load", async (e) => {
  document.querySelector(".loader").style.display = "none";
});

Example

A large picture to show slow loading. is below. You can use the developer tools in the browser to enable some throttling so the picture will be loaded and you can see that the progress indicator is removed after the picture is fully available.