Placeholder con selector :empty

Maquetación de un elemento usando pseudo selector :empty, útil para usar como placeholder hasta que el contenido sea cargado, como por ejemplo vía API o usarlo como relleno mientras se maqueta

Lo más interesante aquí es que los estilos a :empty sólo aplican cuando la etiqueta no tenga ningún contenido texto u otras etiquetas, con un sólo espacio el selector no aplica

He aprovechado las custom properties de CSS para hacer el pintado de gradientes convenientemente definidos y posicionados

El primero para formar un degradado a todo el bloque
El segundo para la primera forma rectangular
El tercero para el círculo
El cuarto para la última forma junto al círculo

Mi idea es que sea reutilizable, actualizando sólo estos valores

--color: rgb(199, 199, 199);
--width: 100%;
--width-line: 250px;
--height-rectangle: 150px;
--height-line: 24px;
--gutter: 10px;

<style>
.card__content:empty {
  --color: rgb(199, 199, 199);
  --width: 100%;
  --width-line: 250px;
  --height-rectangle: 150px;
  --height-line: 24px;
  --gutter: 10px;
  --computed-circle-rad: calc(var(--height-line) * 0.5);
  --computed-height: calc(var(--height-rectangle) + var(--gutter) + var(--height-line) + calc(1.5 * var(--gutter))
  );
  height: var(--computed-height);
  background-image:
    linear-gradient(0.9turn, #fff, transparent),
    linear-gradient(var(--color), var(--color)),
    radial-gradient(var(--height-line) circle at var(--computed-circle-rad) var(--computed-circle-rad), var(--color) 50%, transparent 50%),
    linear-gradient(var(--color), var(--color));
  background-size:
    var(--width) var(--computed-height),
    var(--width) var(--height-rectangle),
    var(--height-line) var(--height-line),
    var(--width-line) var(--height-line);
  background-position:
    var(--width) 0,
    0 0,
    0px calc(var(--height-rectangle) + var(--gutter)),
    calc(var(--height-line) + var(--gutter)) calc(var(--height-rectangle) + var(--gutter));
  background-repeat: no-repeat;
}
</style>

En este repositorio puede verse el código del placehoder con CSS para selector :empty