Simple "loader" para ajax o lo que sea en CSS3

Los "loaders" son un elemento de comunicación web - usuario que se utilizan para indicar que algo se está haciendo. Es siempre mejor que la página en blanco.. o en negro. El clásico de clásicos podría ser una animación gif de algo que se mueve generalmente una fuerza centrífuga que seguramente se contraresta con una normal que se encarga de que la animación no se vaya de la pantalla. Pero un gif animado en un sitio que implementa nuevas tecnologías.. es una mancha de vino tinto. Entonces, chau gif animado. Hola @keyframes.

La contra es que su compatibilidad puede ser limitada.. es necesario que el usuario tenga el navegador más o menos actualizado (por hoy). Para info sobre compatibilidad: w3school.

La implementación es la parte más simple. Para este ejemplo, basta crear un contenedor (un elemento div) con la clase ajaxblock-wrapper

@keyframes progress {
  50% { border-width: .5em 0; }
  to { border-width: .5em 0 0 0; }
}

@keyframes rotate {
  to { transform: rotate(-270deg); }
}

.ajaxblocks-wrapper {
  display: inline-block;
  font-size: @font-size-base; /* Size of the progress indicator */
  width: 1em; height: 1em;
  border: solid white;
  border-top-color: #ddd;
  border-width: 0 0 .5em 0;
  border-radius: 50%;
  box-sizing: border-box;
  margin: .1em .2em;
  background: linear-gradient(white 50%, #ddd 50%);
  background-origin: border-box;
  transform: rotate(90deg);
  animation: rotate 1s steps(4) infinite,
             progress .25s linear infinite alternate;
  text-indent: 99em;
  overflow: hidden;
}

.ajaxblocks-wrapper.small { font-size: 16px }
.ajaxblocks-wrapper.large { font-size: 100px }

.ajaxblocks-wrapper:nth-of-type(2) { border-left-width: .1em; }
.ajaxblocks-wrapper:nth-of-type(3) { border-left-width: .2em; }
.ajaxblocks-wrapper:nth-of-type(4) { border-left-width: .3em; }
.ajaxblocks-wrapper:nth-of-type(5) { border-left-width: .4em; }
.ajaxblocks-wrapper:nth-of-type(6) { border-left-width: .5em }
.ajaxblocks-wrapper:nth-of-type(7) { border-left-width: .6em }
.ajaxblocks-wrapper:nth-of-type(8) { border-left-width: .7em }
.ajaxblocks-wrapper:nth-of-type(9) { border-left-width: .8em }
.ajaxblocks-wrapper:nth-of-type(10) { border-left-width: .9em }
.ajaxblocks-wrapper:nth-of-type(11) {
  background: linear-gradient(grey 50%, silver 50%);
  transform: rotate(90deg);
}