A different approach to showing progress on loading images
Terribly hacky, and terribly bad - but it was really fun to do ;)
It might still be usable though.
I don't care how it works, just take me to the demonstration
How is the browser compatibility?This technique works on every modern browser which supports CSS3 filters and transforms, but can probably be made to work on some older versions of IE, which support Microsoft's proprietary CSS transformations, as well.
How does it work?It's fairly simple:
Rotate the image by -90 degrees so it lies sideways, switch the width for the height (provided you know the aspect ratio), and set the transform-origin to 0 on both axes. finally, apply a filter to the image so it appears black, and then another filter, to turn it white or various shades of grey. Then color it in with the ::after pseudo element of the container in a transparent color. Et voilá - a VERY VERY basic image loading bar. To see it in action, click the button below but toggle the throttling in the developer tools first (good 2g works fine for me) The image that will be loaded is around 7mb in size - unacceptable under normal circumstances, but perfect for demonstration purposes.
The numbers used in the example below have been calculated through higly scientific trial and error.
Where would I even want to use it?Probably the most useful application of it would be in loading-bars for sprites in html5 games.
Where does it fail?It doesn't play nice with animated GIFs, SVGs and interlaced PNGs.
Here's how that looks in code:
<!-- The image-container which gives it its initial height and serves to keep the proportions intact --> <div class="r16t9 loading" id="demo"> <img src="i/drmclone.png" alt=""> </div>
Once again, throttling your network speed on faster connections is advised to actually see it loading.
PS: this is a screenshot from a game I made, which you can play here
Back to the top