spinner

¿Cómo creamos webs y apps más rápidas? Con skeletons configurables con CSS

Como usuarios de páginas web o apps, esperamos que nuestras experiencias, a la hora de navegar por ellas, sea lo más rápida posible. Esperamos que las apps web sean tan rápidas y receptivas como las aplicaciones nativas, independientemente de la cobertura de red que tengamos en cada momento. La idea es que la sensación de rapidez que percibimos como usuario, es más rápida si sabemos lo que está pasando y podemos anticiparnos al contenido antes de que se sirva, por lo que los diseñadores y desarrolladores deben gestionar dichas expectativas y mantenernos informados como usuarios. Aquí es donde entra el concepto de incluir la visualización de skeletons. Actualmente, todos los skeletons de la app móvil de BBVA se generan por CSS.

Facebook Skeleton

Y, ¿qué son los skeletons?

Un skeleton es la representación gráfica del contenido que se va a cargar. Cada vez que alguien solicita nuevo contenido, se muestra inmediatamente el skeleton, mientras los datos se están cargando en segundo plano. Una vez que el contenido esté listo, simplemente se cambia el skeleton por los datos cargados.

Para crear esos skeletons podemos utilizar mockups de texto, imágenes u otros elementos, pero eso crearía solicitudes adicionales y datos de sobrecarga… La mejor solución, en mi opinión, es crearlo todo sólo con CSS, ya que no existen solicitudes adicionales y los cambios en el diseño de los skeletons será mucho más fácil.

Primeros pasos

Lo primero que hemos de hacer es pintar las figuras básicas que conformarán nuestro skeleton. Para ello, utilizaremos diferentes gradient en la propiedad background-image. Los gradients. Lo primero que hacemos es pintar las figuras:

.skeleton {
background-repeat: no-repeat;
background-image:
/* figura 1 */
radial-gradient(circle 16px, white 99%, transparent 0),
/* figura 2 */
linear-gradient(white 40px, transparent 0),
/* figura 3 */
linear-gradient(gray 100%, transparent 0);
}

Estas formas llenan todo el espacio, al igual que los elementos a nivel de bloque. Para ajustarlas a nuestras necesidades debemos definir las dimensiones de estas. Para ello utilizaremos pares de valores (siempre en el mismo orden que el utilizado en background-image), que asignaremos a la propiedad background-size:

.skeleton {
background-size:
32px 32px,  /* figura 1 */
200px 40px, /* figura 2 */
100% 100%;  /* figura 3 */
}

El último paso para crear nuestro skeleton es posicionar las formas, para ello utilizaremos la propiedad background-position. Esta propiedad funciona como un position: absolute, donde el primer valor es el left y el segundo es el top:

.skeleton {
background-position:
24px 24px,  /* figura 1 */
24px 200px, /* figura 2 */
0 0;  /* figura 3 */
}

Skeletons configurables

Ahora, para darle una mayor funcionalidad, vamos a crear un mixin de SCSS que nos permitirá crear skeletons configurables para cada necesidad que se nos presente.

@mixin skeleton-builder($itemColor, $backgroundColor, $linears…) {}

Siendo:

  • $itemColor, el color de los items.
  • $backgroundColor, el color de fondo.
  • $linears, un array con los siguientes valores:
    • Tamaño de cada item, en pares de valores width/height.
    • Posición de cada item, en pares de valores left/top.
    • Posibilidad que el item se pinta de derecha a izquierda o de izquierda a derecha.
    • Posibilidad de que el item lleve o no skew.

Lo primero que hace nuestro @mixin es recorrer $linears, e ir creando las cadenas de valores que luego le pasaremos a nuestras propiedades CSS que pintarán el gradient.

Una cosa que necesitamos es una función que nos despiece una cadena de caracteres. En nuestro caso, el par valor de tamaño, separándolos por la cadena del segundo argumento.

@function split-str($string, $separator) {
$index: str-index($string, $separator);
$str-1: str-slice($string, 1, $index - 1);
$str-2: str-slice($string, $index + 1);
@return $str-1 $str-2;
}

De esta manera podremos calcular exactamente el tamaño que queremos que tenga nuestra figura. Para pintarla con el tamaño deseado, debemos asignar el doble del ancho, ya que el linear-gradient a pintar es del 50% del color de la figura y 50% del color del background.  Así se visualizará correctamente. Este es el código.

@mixin skeleton-builder($itemColor, $backgroundColor, $linears...  ) {
$bg-img: '';
$bg-size: '';
$bg-pos: '';
$comma: '';
$skew-width: '';


@each $i in $linears {
// se despieza el par valor del tamaño
$splitList: split-str(nth($i, 1), ' ');
$size-1: nth($splitList, 1);
$size-2: nth($splitList, 2);

// se recupera si se pinta de derecha a izquierda o viceversa.
$inverted:  nth($i, 3);

// se recupera si se pinta skew o no.
$hasSkew: nth($i, 4);

@if $hasSkew {
//Se calcula el width de cada figura
$skew-width: 'calc((' + $size-1 + ' * 2) + (' + $size-2 + '/ 2))';

@if $inverted {
$bg-img: $bg-img + $comma + 'linear-gradient(-60deg, ' + $itemColor + ' 50%, transparent 50%)';
} @else {
$bg-img: $bg-img + $comma + 'linear-gradient(-60deg, transparent 50%, ' + $itemColor + ' 50%)';
}
} @else {
$skew-width: $size-1;
$bg-img: $bg-img + $comma + 'linear-gradient(' + $itemColor + ' 100%, transparent 0)';
}
$bg-size: $bg-size + $comma + $skew-width + ' ' + $size-2;
$bg-pos: $bg-pos + $comma + nth($i, 2);
$comma: ', ';
}
background-image: #{$bg-img};
background-color: #{$backgroundColor};
background-size: #{$bg-size};
background-position: #{$bg-pos};
}

¡Y ya solo queda usarlo! Para ello, lo único que tenemos que hacer es hacer un @include en la capa donde queramos pintar el skeleton. Lo vemos:

@include skeleton-builder(
$secondary_color-200,
$secondary_color-0,
'32% 22px' '0 0px' false true,
'16% 22px' '100% 0px' true true,
'45% 22px' '0 32px' false true,
'45% 22px' '100% 32px' true true
)

See the Pen Skeleton with linear-gradient by David Matos (@dmatos) on CodePen.

Y…¡listo! De esta forma ya podemos generar tantos skeletons como necesidades tengamos en nuestra aplicación de una manera sencilla y poco costosa a nivel de recursos.

Muchas gracias por el interés y espero que os sea de ayuda en vuestro trabajo diario ¡Nos vemos en la próxima!

Imagen principal; Pexels

¿Quieres saber que más cosas hacemos en BBVA Next Technologies?

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, brindarle una grata experiencia y mostrar a los usuarios publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continúa navegando por este sitio web, consideramos que acepta su uso. Puede cambiar la configuración u obtener más información accediendo a nuestra política de cookies aquí.