Animated loading gif image as a repeated background
I would like to find something lik开发者_StackOverflowe this:
(source: opengraphicdesign.com)But that it can be a repeated background on an html element and looks like a whole block.
For example, a 80x80 gif as a repeated background in a 400x400 DIV that would give the illusion of a big 400x400 animated image.
Where can I find such a GIF
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.
Give wegif.com a try
a loading gif always has an animation - if you repeat the gif, this animation will play per image - i don't know if that looks very nice
精彩评论