Hay un artículo genial en inglés que explica cómo conseguir lo que quieres [de un modo sencillo simplemente con CSS][1], pero te adelanto algo antes de seguir: No se puede hacer una librería genérica con esto porque depende del *layout* que estés usando, así que tienes que diseñar el *esqueleto* de tu layout para cada componente tuyo.

A continuación, ya que la licencia del artículo lo permite, voy simplemente a resumir lo principal y traducirlo como respuesta:

Imagina que tienes una tarjeta a mostrar como ésta:

<img src="https://i.sstatic.net/5uQwwm.png" width="250" />

Pero va a tomar tiempo, así que quieres mostrar, mientras tanto, algo como

<img src="https://i.sstatic.net/SDX77.png" width="250" />




Lo que puedes hacer es crear mediante CSS ese layout y usarlo mientras no tengas los datos reales:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .skeleton {
      background-repeat: no-repeat;
      background-image: 
        radial-gradient(circle 16px, white 99%, transparent 0),
        linear-gradient(white 20px, transparent 0),

        linear-gradient(lightgray 100%, transparent 0);
        width: 250px;
        height:250px;
        background-size:
        32px 32px,  /* avatar */
        200px 40px, /* title */
        100% 100%;  /* card bg */
        
        background-position:
        24px 24px,  /* avatar */
        24px 200px, /* title */
        0 0;        /* card bg */
    }

<!-- language: lang-html -->

    <div class="skeleton"></div>

<!-- end snippet -->

Por tanto, lo que has de hacer es definir un esqueleto (puedes hacerlo como en el ejemplo, con puro CSS, o con una imagen de fondo), aplicar la clase skeleton mientras no tengas qué mostrar, y luego eliminar la clase cuando ya tengas los datos reales:


  [1]: https://css-tricks.com/building-skeleton-screens-css-custom-properties/