Hourglass Loader
A loading animation that can be wrapped around the container an element is loaded into, so that it sort of "transforms into" the loaded element when its done. Also works as an overlay that reveals the loaded element within from the inside out.
Project Description
Inmplementation and Usage
This HTML element can be used in two ways: As a wrapper around the content to be loaded (as per its original conception) and as an overlay in front of the content that should be revealed after it loaded completely.
The markup for that looks as follows:
Usage as a wrapper
Usage as an overlay
Once you have added the markup, apply whatever scripting you use to load the content hidden behind/inside it and when the loading has finished, remove the class "loading" from the block with the class "hourglass-loader-wrapper" to reveal it.
Please note that if your loaded content contains elements that need to be rendered outside the bounds of the container and you are not using it as an overlay, you will have to add the class "finished" to the element you removed the "loading" class from to enable this. But don't do that at the same time you remove the "loading" class, the CSS transition has to finish first (by default it takes ~800 milliseconds in wrapper mode and ~1200 in overlay mode). So it is necessary to use either a timeout or a combination of an event listener for the animation's end and a follow-up timeout (just listening to the event without a timeout will cancel it too soon, as the various elements inside animate at different speeds and once the first one has finished, the event is triggred).
Here's some example code using jQuery:
Applying the "finished" class at the end of the animation
You should also be aware that a similar problem exists when using overlay mode. Once the animation has finished, the overlay is no longer visible but still present and will thus block interactions with the element that has just been revealed. So the same technique as above must be applied to hide the overlay once its animation is finished. The class name to be applied for that is "revealed":
Hiding the overlay when the animation has ended
The "revealed" class sets to "pointer-events" property to "none". Not all browsers can handle this properly. So if you want to support older and exotic browsers it might be better to hide the element with "display:none" or to delete it completely. If you're hiding it because yyou're planning to re-activate it later, but with an inverted animation, you will have to put a delay in between the operation that displays it again and the one that re-applies the "loading" class, because initially hidden elements will not animate when they are being revealed. So a timeout is needed here as well:
Inverting the overlay reveal animation
The animation speed can be reduced by applying an additional class to the element with the class "hourglass-loader-wrapper". The class "medium-anim" doubles the default duration, the class "slow-anim" quadruples it.