Amazing Loading Page Effect With jQuery

Amazing Loading Page Effect With jQuery. Hello On this occasion i will share a trick how to make or install the page loading effect with CSS3 Animations and also jQuery on your blog page.

Besides making your blog or website becomes more attractive, the animated page loading can also increase the speed of loading your blog or website becomes faster than before.

And if you want to install it on your own blog or website, please follow the steps below.

Amazing Loading Page Effect With jQuery

Let's start to add the amazing loading page :

Step 1: Login to your blogger panel admin
Step 2: Click On Template » Edit HTML
Step 3: Add this css code just before the code </head>

<style>
#cabon-loading {
position: fixed;
z-index: 50;
top: 0; 
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.5)url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP7k1rwYZA7wntNbdjIv5fo2lk4mdCpeeqk0RXSvA-FSCw64u_2gQBE0Qwk0NTZ8p8Wf-U_Wn-zupTFhxHieDaKWkrlXvPY4eIO3jc0u7wPG_qIsXmDh4TTJWF5_3R-16pA-ED0wc9gSvW/s1600/loading5.gif)no-repeat center center;
line-height: 350px;
text-align: center;
font-size: 36px;
color: #fff;
text-indent: -9999px;
}
.CABON #cabon-loading { display: none; } 
@media only screen and (device-width: 768px) { 
#loading { position:absolute; width:1040px; min-height:768px; }
}
#cabon-progress-bar {
position: absolute;
top: 0;
left: 0;
background: #de1301;
opacity: 0.8;
width: 0;
height: 5px;
}
#cabon-loader { height: 100%; display: none; }
</style>

Step 4: Find this code <body> using Ctrl+F then add the following code after the code <body>

<div id='cabon-loading'><div id='cabon-progress-bar'></div><div id='cabon-loader'></div></div>

Step 5: Add the following jQuery code just above the code </body>

<script type='text/javascript'>
(function($){ $("html").removeClass("CABON"); $("#header").ready(function(){ $("#cabon-progress-bar").stop().animate({ width: "25%" },1500) }); $("#footer").ready(function(){ $("#cabon-progress-bar").stop().animate({ width: "75%" },1500) }); $(window).load(function(){ $("#cabon-progress-bar").stop().animate({ width: "100%" },600,function(){ $("#cabon-loading").fadeOut("fast",function(){ $(this).remove(); }); }); }); })(jQuery); 
</script>

Step 6: Last step and save the template, see the results and good luck.