SVG Text Stroke Animation Via CSS. Demo: http://jsbin.com/fekigigeli

svg-css-text-animation.htm

<svg width="500" height="150">
  <text x="100" y="80" fill="none" stroke="black" stroke-width="1" font-size="50">Loading...</text>
</svg>

<style>
text {
  font-family: sans-serif;

  stroke-dasharray: 100%;
  stroke-dashoffset: 100%;
  -webkit-animation: draw 5s forwards;
     -moz-animation: draw 5s forwards;
       -o-animation: draw 5s forwards;
      -ms-animation: draw 5s forwards;
          animation: draw 3s forwards;
 -webkit-animation-iteration-count: infinite;
         animation-iteration-count: infinite;
}

@-webkit-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-o-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-ms-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
</style>