Componentes de Bootstrap

Marcadores de posición5.3+

Formas grises que ocupan el lugar del contenido mientras carga.

Los marcadores de posición (esqueletos) muestran la forma de lo que viene, para que la página no salte al llegar. Úsalos para contenido que tarda más de un momento.

Cuándo usarlo

Úsalo

Igualar la forma y el tamaño del contenido real.
Usar la animación de brillo con moderación.
Marcar el bloque aria-hidden y anunciar el estado de carga una vez.

No

Usarlos para esperas de menos de 300 ms.
Dejarlos tras un error.
Mezclarlos con contenido real en el mismo bloque.

Anatomía

Bloques (placeholder) dimensionados con la rejilla (col-6) dentro del elemento que sustituyen, con una animación opcional (placeholder-glow, placeholder-wave).

Variantes y estados

Tarjeta con marcadores

Combinaciones

Combinación	Para qué usarla
Marcador × forma	La misma forma que el contenido real: una línea de título, tres de texto, un botón.
Brillo × onda	Brillo para una tarjeta, onda para una lista larga; ambos se paran con movimiento reducido.

Qué cambia Didactika y por qué

Qué cambiamos	Por qué ayuda
Los bloques son redondeados y discretos	Sugieren contenido sin fingir serlo, y nada salta cuando llega.

Clases

Clase	Qué hace
`placeholder`	Un bloque gris
`col-*`	Su ancho
`placeholder-glow`, `placeholder-wave`	Animación del grupo
`placeholder-xs`, `placeholder-sm`, `placeholder-lg`	Altura

En esta versión

Bootstrap 5.3 guarda sus colores en variables CSS (--bs-*), así que un tema recolorea el componente con una sola variable.

Accesibilidad

Oculta los marcadores a la tecnología de apoyo y anuncia el estado de carga con un mensaje de estado.
Respeta el movimiento reducido: sin animación.