Cargando circular animado CSS3 que no utiliza imágenes

por .

Spin.js es una pequeña biblioteca Javascript que podemos utilizar para renderizar un cargando circular sin la necesidad de utilizar una sola imagen.

La biblioteca es muy liviana, apenas pesa 2.8k en su versión simplificada, eso se traduce en 1.7kb aproximadamente si la comprimimos utilizando gzip, algo que hoy por hoy es soportado por la mayoría de los navegadores.

Spin esta ideada para ser utilizada en todos los navegadores, inclusive IE6, la lista completa de compatibilidades es: Chrome, Safari 4+, Firefox 3.5+, IE 6-7-8-9+, Opera 10.6+, Mobile Safari (iOS 4)

cargando sin imagen javascript

Modo de uso:

var opts = {
  lines: 12, // The number of lines to draw
  length: 7, // The length of each line
  width: 5, // The line thickness
  radius: 10, // The radius of the inner circle
  color: '#000', // #rbg or #rrggbb
  speed: 1, // Rounds per second
  trail: 100, // Afterglow percentage
  shadow: true // Whether to render a shadow
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);

En el sitio de Spin.js podrán encontrar como implementar el cargando circular integrado con el framework jQuery. Es de verdad muy simple, y el resultado es muy bueno.

Web: Spin.js

Categorizado en: