Animated loading gif image as a repeated background

I did it, after some fine cutting I've created the perfected image for the job. Here is the gif image:

And here is a live demo http://jsfiddle.net/dtxSW/94/

HTML:

<span></span>
<span></span>
<div></div>

CSS:

div {
  background:url('http://i.stack.imgur.com/tQTRW.gif') repeat;
  height: 500px;
}

span {
  width: 108px;
  height: 18px;
  display: block;
  background:url('http://i.stack.imgur.com/tQTRW.gif') repeat-x left;
}

This gif can be repeated infinitely and still look as one big whole animated image.