Those animations are best suited for content that takes some time to load like an image gallery.
The animations are very easy to customize since they are made out of just CSS, you will have to change jQuery code so that it fades out the loading screen once the content loads. I will explain to you how the first example works.
HTMLThe HTML for this example only has four elements that are used for the animation and out of four elements only one is animated.
CSSFirst we have to create a fixed div element that can float above everything.
Second we have to create a center spot that always will remain centered.
Third and the last thing we have to do is to animate "#object" using keyframes. You will notice that i used keyframe twice '@-webkit-keyframes' and [email protected] animate' first is for webkit based browsers second one is for internet explorer.
In the final product you would want something like this:
This will hide the animation once the content of the page is loaded.