6 Animated Page Loading Progress Bar For Blogger
Posted: 23 Jan 2015 01:59 AM PST
6 Animated Page Loading Progress Bar For Blogger
Animated Page Loading Effect i think Everyone See This Type Effect in Some pro Website’s.
Today i am Going to share Page Loading Effect for Blogger Blog It Helps to attract Blog your Visitor’s.
This is a Simple Widget for Blogger Developed From Css3 and Js.it is Fully responsive Widget Supports in all Browsers.
Check this Live Demo -> Click Here
How to Install This Blogger Plugin in Blogger Blog?
Just Follow this Below Steps For All 6 Animated Page Loading Progress Bar.
Go to your Blogger Dashboard
Go to Template
Use CTRL+F to Find </body> Tagg
Now Paste your Animated Page Loading Progress Bar Code.Just Above </body>
Check The Below Image
6 Animated Page Loading Progress Bar For Blogger
6 Animated Page Loading Progress Bar
Style1
<style> #page-loader { position: fixed!important; top: 0; right: 0; bottom: 0; left: 0;
z-index: 9999; background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfN1MkO-YiRAi4A0v6xgBwUvODRgdSGooj5qNI4504ZVkD_geCKs862kV6yvygEtxa_Szy76APcRgeGXkgWPd5Ssvf6If_RXw1SiWQ3okPLPvQlMvzxJ39ubNG_MAJM9uNVYnOMnBlenM/s1600/ajax-loader.gif')
no-repeat 50% 30%; color: #000; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em; } </style> <script
type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() { // ... Show the Animation `.fadeIn()` $('#page-loader').fadeIn(000).delay(6000).fadeOut(000); }); //]]> </script>
Style 2
<style> #page-loader { position: fixed!important; top: 0; right: 0; bottom: 0; left: 0;
z-index: 9999; background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAhTD3dvfzfVpWng14trMDlstmB36m9Cg6e8JNOZOMTr_il1InyeGgsONH_gXWNteIvKaEldWMQXqm3pj6PwdOMpFXMyI4obS3g3bJyWojIq1kCm7lpqzm0wmpcmj9y0C791LdGbRMnKU/s1600/ajax-loader2.gif')
no-repeat 50% 30%; color: #000; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em; } </style> <script
type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() { // ... Show the Animation `.fadeIn()` $('#page-loader').fadeIn(000).delay(6000).fadeOut(000); }); //]]> </script>
Style 3
<style> #page-loader { position: fixed!important; top: 0; right: 0; bottom: 0; left: 0;
z-index: 9999; background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOFzwPaiwMAgXwwzAXmSCMziuyv5CeFjI3KUnz628hql28uwe_XsMGldxEejrMPZXYBFja57bkoWYT4n1hqvHcOlmLYFPGNqce1WVHn70azSFiKnFF6SsZEkUllxdjaYNRBLBAEqPaD4o/s1600/ajax-loader2.gif')
no-repeat 50% 30%; color: #000; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em; } </style> <script
type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() { // ... Show the Animation `.fadeIn()` $('#page-loader').fadeIn(000).delay(6000).fadeOut(000); }); //]]> </script>
Style 4
<style> #page-loader { position: fixed!important; top: 0; right: 0; bottom: 0; left: 0;
z-index: 9999; background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4YyXA195oPcrRiSxyRfPWweHcdTU8wkqgWFFrjS0vLerJ9AXABfHh8A4DWbfZG7hkCDNHC7MZoLNCKO-NzVj0jrmqrgd69h_AJqxCgmKbQg21g4hyphenhyphenWT-qEKjxhcs6qXOAecFvG7T-h4Y/s1600/723.gif')
no-repeat 50% 30%; color: #000; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em; } </style> <script
type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() { // ... Show the Animation `.fadeIn()` $('#page-loader').fadeIn(000).delay(6000).fadeOut(000); }); //]]> </script>
Style 5
<style> #page-loader { position: fixed!important; top: 0; right: 0; bottom: 0; left: 0;
z-index: 9999; background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7QKD8gP_5SfgDJtMkN9TmtInrckVnoyHq1GuULC2FimYeuzMpL3RltBMgkl5AZwE0W_D6Coa5fbwtodYXop5lxz_2bzfiF40XP3wwnsGU3rtspIxNZSQg82tvm7epCQPBTF0UwqHEdnc/s1600/9.gif')
no-repeat 50% 30%; color: #000; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em; } </style> <script
type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() { // ... Show the Animation `.fadeIn()` $('#page-loader').fadeIn(000).delay(6000).fadeOut(000); }); //]]> </script>
Style 6
<style> #page-loader { position: fixed!important; top: 0; right: 0; bottom: 0; left: 0;
z-index: 9999; background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-qOp1w26tntWEmTPyyuIYD_iLXjoCLsxmS6e80N2oIbVDtWvlzTRdfnATewTGuGy2i_MtPNHS-I7qw5PylIfDituny6nFPZGnsw3oz5ivypVBdm8vtlPMhmAfsJGMTUUgvwcTEdwPISQ/s1600/iOS7Loader.gif')
no-repeat 50% 30%; color: #000; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em; } </style> <script
type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() { // ... Show the Animation `.fadeIn()` $('#page-loader').fadeIn(000).delay(6000).fadeOut(000); }); //]]> </script>
From the Editor’s Desk
