CSS → Overlay без дополнительных html элементов

Пример вывода оверлея на чистом css:

body.overlay::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

Демо.

Можно добавить прелоадер:

body.preloader::after {
  content: '';
  position: fixed;
  inset: 0;
  height: 55px;
  width: 55px;
  margin: auto;
  background: white url('preloader.gif') center no-repeat;
  border-radius: 6px;
  z-index: 101;
}

Демо.

Другие способы вывести оверлея.