30 CSS Page Preload Animations
March 27, 2015
I have created 30 CSS page preload animations that used only CSS for the animation, jQuery was used just to hide the animation. You can hide the loading screen just by clicking anywhere on the screen.

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.


The HTML for this example only has four elements that are used for the animation and out of four elements only one is animated.


First 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 '@keyframes animate' first is for webkit based browsers second one is for internet explorer.


In the provided demo i have set the JavaScript to hide the animation when you click on it.

In the final product you would want something like this:

This will hide the animation once the content of the page is loaded.
About the author
Popa Robert: Is the founder of Simbyone.com, freelance web developer and designer, he likes to create beautiful websites and water cooled PC's
March 30, 2015
Hello friend, Can you help me to add this loader to my website ? please
Robert Popa
March 30, 2015
Sure, what is the problem you are having ?
April 1, 2015
Thank you for this super preload animations. But, can I ask you? Why did you include the loading-center block, when there is a #loading block which covers the content?
Robert Popa
April 1, 2015
Hello, Thanks for asking. I have used #loading-center so i can center the animation better, #loading is used just to cover the content. I could have used absolute position to center the animations but that won't work for some since in a few of them the absolute position is what is changed to produce the animation.
April 8, 2015
Hello! Great tutorial! great inspirations, i love it! One thing though, i've read that the load() method is deprecated, do you happen to know what should be used instead? Thank you! ;)
April 8, 2015
UH! i Found something! You should use .on() method $("selector").on("load", function() { // ... }); Anyway, it'll work with both methods BYEE!!
Robert Popa
April 8, 2015
Thanks for the update :)
May 17, 2015
how to add the preloader to my website ?? this is my website : bcbontang.net
May 24, 2015
AMAZING. Just simply wonderful. Thanks for writing this up! :D One question though, why is there icomoon loaded in each html file? What purpose does it serve? And how is it being used? I cant seem to find any reference to the icomoon css being used? Thanks!
Robert Popa
May 24, 2015
Hello, don't worry about icomoon they where left there by mistake. I am using icomoon on the main demo page for the download icon. All those shapes you see are just stylized divs.
May 29, 2015
Cool, thanks! A follow up question. What if i wanted this animation to show only once. How would I realize that? Currently i configured it to load only on the homepage. But when people visit another page and end up back on home -> it loads again. I would like it to load only upon the first time they visit. Thanks!
Robert Popa
May 30, 2015
You can do that by creating cookies with javascript I advice you to read this: http://stackoverflow.com/questions/2257631/how-create-a-session-using-javascript
August 23, 2015
hi thanks for share, i used your nice app but i have a problem whit is please help me. during page loading my other content like nave and header text is loaded too. how to solve it?
September 3, 2015
I implemented the preload animation but now I am unable to scroll on the page ever since. How can I fix this?
Erik Klaver
October 17, 2015
Great script, is it possible to add some text underneed the animation? Thank you
John Klokivh
October 25, 2015
How would you add this to shopify ?
October 30, 2015
it is not animating out my original webpage
Yuddy Hernández
November 4, 2015
Muchas gracias !!!!! :)
December 23, 2015
THANK YOU SO MUCH FOR THIS! My site needed this like a dying man needs a blood transfusion! I've run my site on Tumblr - and it's very sloooowww in loading due to several scripts & LOTS of images :-/ It took forever to load ( I've removed a few scripts since ) but it was just frustrating. I have tried 5 preloader scripts and NONE have worked - but yours worked like...BUTTER ( smoothly ) The only changes I had to make were an increase in the fadeout to : $("#loading").fadeOut(3000); and omit the jquery-2.0.2.min file -since my theme already contains "jquery-1.8.2.min.js" and everything worked beautifully :) I'm very grateful to you- you've made my Christmas even BETTER! :) Wishing you all the very best in life & great new beginnings for 2016
December 27, 2015
Hi sir am ram i started my page last 2 month. i need alter my preload page like some robo type or some creative think of software site can you help me if you free .my site fully construct now going on svg images so my preload page also, i wanna SVG format.
Anchit Bajaj
April 7, 2016
Can I use this in my e=website theme? I'll mention you in the credits section
July 8, 2016
I am also unable to scroll down when this is implemented. Is there a fix for that?
March 8, 2017
Thanks man. Just awsome.
June 17, 2017
hey i have a problem when i acces the page the loader doesnt stop what can i do?
May 31, 2019
I need help fixing the office error code message 30015-11 (5)with Microsoft Office. I followed the steps the link office error code 30179 25 I have followed the steps and fixed the error, but I need help with fixint the error with the templates now. Can anybody suggest the steps to fix the templates?
Would you like to share your thoughts?
Fields marked with * are mandatory. We don't share your email with anyone. Email provided in the above fields are used for identification only. If you chose to subscribe to our newsletter you can cancel at any time.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
Hot Posts