7 Cool Pre-Loader Animations with CSS3 - hyderabadrichest

7 Cool Pre-Loader Animations with CSS3

How to Make Cool Loading Effects Before Blog Images Appear

First of all, sorry for late posting because it should have been published yesterday. Sorry to keep you waiting (is there?). Initially I was going to post this article yesterday afternoon, but it turns out that there is a slight problem with internet connection at home. So, just now.

It's been 2 weeks since I last posted a tutorial on coding. Lastly is about How to Custom CSS and JS Per Post . This time, I'll come back with coding. To be precise, it is about a tutorial to make cool pre-load animations when a website page is loaded with 7 choices.

Pre-loader animation is an animation that runs while a web page is being loaded. This animation can be a gif image, a progress bar with javascript/jquery, or a CSS3 animation. In this tutorial, we'll cover CSS3 animations, with a little help from jquery. The advantage of using CSS3 animation for this perloader is that it is lighter and more economical in source compared to images or jquery.

Before discussing how to add it to your site or blog, here are 7 animation options that you can choose one of them.

1. Audio Wave

This loading effect moves like a sound wave.

2. Circular Square

The loading effect changes the shape of the swirling elements

3. Crossing Shapes

Loading animation effect with elements that alternate and cross each other

4. The Snake

This website loading animation resembles like a snake slithering.

5. Spinning Disc

Pre-load animation that swirls like a working floppy disk.

6. Glistening Windows

This blog pre-loading animation resembles a swirling windows icon.

7. Big Spinning

Just like number 5, this animation is in the form of a swirling circle, but is more dynamic.

Yep, those are the seven preloader animations that you can choose from. Oh yes, you should know that in some browsers, the pre-loaders above may not work. This is because to be able to display CSS3 animations, some browsers use a certain prefix in their css code properties.

In the demo above, I made it only support for the Chrome browser and other high-version browsers. If it doesn't work in your browser, try updating or changing your browser. You can read more about cross browser CSS animations here:

If you want to download all the animations above, please click the link below:

Download

How to Add Pre-loader Animation on Blogger/Blogspot

To display this loading animation on your blog, please follow the steps below:

1. Select a style from the 7 options above that you like. Copy the CSS and HTML code because they will be used in the next step.

2. Login to Blogger Dashboard > Select Blog > Template > Edit HTML.

3. In the edit html column, then place the css preloader code you chose above the code ]]></b:skin>

4. For the HTML code, place it directly below the <body> tag.

5. Then, add the script below just above the </head> tag.

 <script type = ”text/javascript” src = ”http://code.jquery.com/jquery-2.1.3.min.js”></script>  
<script type = ”text/javascript”> $ (window ) .load (function () {$ (". preload-wrapper"). fadeOut ("slow");})
</script>

The script above is for calling and using jquery. Its function is to make the pre-loader animation appear only while the page is being loaded, and disappear when the entire page is loaded.

The red code is used to call the jquery library. Most blog templates usually come with jquery. So, only include the code if your template doesn't use the jquery library. First check whether the preloader runs or not without the code. If it works, then you don't need to add the red code.

6. Finally, don't forget to save your template edits.

Yep, done. Please try. If there are difficulties and experience errors, do not hesitate to ask in the comments. Hope it is useful🙂

Show Comments
Hide Comments

0 Response to "7 Cool Pre-Loader Animations with CSS3"

Post a comment

Top Ad Articles

Top Ad Articles

Top Ad Articles 2

Advertise Articles