Overlay

About

This example demonstrates an overlay layer that can be shown for loading or status messages on top of visual content.

It also shows horizontal and vertical centering without Flexbox or CSS Grid, using traditional inline-block and vertical-align behavior.

Demonstration

Use the controls to toggle the overlay manually or simulate a short loading workflow.

Sample Code

Core overlay markup:

<div class="overlay-container">
  <div class="overlay-content-container overlay-content-container--backdrop overlay-content-container--mode-dark">
    <div class="overlay-content overlay-content--centered overlay-content--message">
      <p><span class="animation animation--large animation--busy"></span><br>Loading...</p>
    </div>
  </div>
</div>

Traditional vertical + horizontal centering (no flex/grid):

.overlay-content-container {
  position: absolute;
  inset: 0;
  text-align: center;
}

.overlay-content-container::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.overlay-content {
  display: inline-block;
  max-width: 90%;
  vertical-align: middle;
  text-align: center;
}