Crear un sencillo loader SVG

facebook-svg gplus-svg twitter-svg

Crear un loader SVG es mucho más sencillo de lo que parece. En este caso la animación dura 10 segundos ( dur = "10s" ) y se repite indefinidamente ( repeatCount="indefinite" )

Que queremos conseguir

Cómo hacerlo

Primero dibujamos un circulo. El circulo tiene un borde de color azul ( stroke="#abcdef" ) de 40px ( stroke-width="40" ) y es discontinuo ( utilizamos stroke-dasharray ).

<circle id="circulo" cx="130" cy="130" r="75" stroke="#abcdef" stroke-width="40" fill="transparent" stroke-dasharray="0 472" />

Recuerde cómo dibujar un circulo en SVG

Para dibujar líneas discontinuas en SVG utilizamos  el atributo stroke-dasharray.  El valor de stroke-dasharray es una sucesión de números, separados por comas o espacios, que define el patrón a seguir. Por ejemplo si stroke-dasharray="10  5" la línea será compuesta por fragmentos de línea de 10px separados por espacios de 5px.

Lea más acerca de bordes discontinuos en SVG

En nuestro caso queremos que el valor inicial de stroke-dasharray="0 471.23889803846896", o sea líneas de 0px seguidas de espacios muy grandes. El segundo parámetro ( 471.23889803846896 ) es el valor exacto de la circunferencia del circulo.

<circle id="circulo" cx="130" cy="130" r="75" stroke="#abcdef" stroke-width="40" fill="transparent" stroke-dasharray="0 471.23889803846896" />

Queremos animar al atributo stroke-dasharray, desde el valor inicial ( stroke-dasharray="0 471.23889803846896" ) hasta un valor final ( stroke-dasharray="471.23889803846896 0" ) cuando  habrá una sola línea larga que cubrirá toda la circunferencia del circulo, seguida de un espacio prácticamente nulo.

Para esto hay que anidar dentro del elemento <circle> un elemento <animate> cuyos atributos from ( desde ) y to ( hasta ) definen los valores entre los cuales queremos animar el borde.

<circle id="circulo" cx="130" cy="130" r="75" stroke="#abcdef" stroke-width="40" fill="transparent" stroke-dasharray="10 5" >
<animate id="circuloA"
    attributeType="XML"
    attributeName="stroke-dasharray"
    from="0 471.23889803846896 "
    to="471.23889803846896 0"
    begin="0s"
    dur="10s"
    fill="freeze"/> 
</circle>

Utilizando JavaScript para calcular la circunferencia

Sabemos que la circunferencia C de un circulo es C = 2πr, donde r es el radio del circulo. Esto traducido a JavaScript es:

var C=2*Math.PI*r;

Podemos escribir una función que calcula la circunferencia relativo al radio del circulo <circle id="circulo" >, y la utiliza para establecer el valor de stroke-dasharray, y de los atributos from y to de la animación <animate id="circuloA" >. En el HTML el valor de estos atributos es nulo ( "" )

Observación: el id de la animación es igual al id del circulo +A.

<circle id="circulo" cx="130" cy="130"  . . . . " > 
<animate id="circuloA" . . . . . .

function circunferencia(Id) {
  var esteId = document.getElementById(Id);
  var r = esteId.getAttribute("r");
  var C = 2 * Math.PI * r;
  var a = document.getElementById(Id + "A");
  a.setAttribute("from", "0 " + C);
  a.setAttribute("to", C + " 0");
  esteId.setAttribute("stroke-dasharray", "0 " + C);
}
circunferencia("circulo2");



	 

¿Que más podemos hacer con esto?

Podemos construir un cronómetro o incluso un reloj, con la precisión y exactitud de una herramienta digital y la utilidad de una clepsidra.