Designed by Veethemes.com

Jquery Preloader for Website or blog use of css style

Monday, May 13, 2013 by Mohan Singh No Comment
Generally most of  websites want to makes a responsive design and fast loading page. cause of images and some irrelevant codes problem to fetch your codes so load time to increase your website. I have gotten some request to my mail from users to make a preloader code. I have searched on google or another search engine for Preloader Jquery plugins.

What is Preloader Jquery Plugin ?

Preloader Jquery plugin works lightly on your website when open webpage then Preloader displays a loading animation until the browser fetched the whole web content and will fade out the moment the page has been completely cached then after show your full webpage. It's simply to hide load time affect to webpage and attract to user on your website.

Why to use this?

Cause of loading more time of website , mostly user switch or skipped to another website so it's very usefull add this jquery. it works simply to use of css , jquery and html codes.

Features:

  1. Preload a whole web page.
  2. Preload a part of the page.
  3. Gets all images, <img> tags and background-image of your CSS
  4. Easy to implement.
  5. Adjustable loading bar.
  6. Tested in Firefox, Safari, Opera, Chrome, IE7, IE8 and IE6 (script will be ignored in IE6 though).

How to add this on website , Blog and Blogger →


Implementation:


First : Copy this below code and Paste before </head> 

<script class='cssdeck' src='//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js'/> 
 <style type='text/css'>/*<![CDATA[*//*===================  Basic structure===================*/#loader {  background-color: #000;  position:absolute;  top:0%;  left:0%; width:100%;  height:100%;  z-index:10000;}.circle-top-line,.circle-bottom-line{  padding:0;  width:100%;  height:5px;  display:block;  z-index:100;  position:relative;}.circle-top-line{  margin-top:60px;  margin-bottom:-60px;
  /*box-shadow*/  -webkit-box-shadow:0 2px 3px #111;     -moz-box-shadow:0 2px 3px #111;          box-shadow:0 2px 3px #111;}.circle-bottom-line{  margin-top:-58px;
  /*box-shadow*/  -webkit-box-shadow:0 2px 2px black;     -moz-box-shadow:0 2px 2px black;          box-shadow:0 2px 2px black;}.circle-line{  width:100%;  height:250px;  margin:60px auto;  padding:10px;}.circle-main{  width:200px;  height:200px;  margin:200px auto ;  display:block;  padding:15px;  text-align:center;  line-height:150px;  font-size:40px;  font-weight:bold;  z-index:90;
  /*border-radius*/  -webkit-border-radius:150px;     -moz-border-radius:150px;          border-radius:150px;}.circle-inner{  width:180px;  height:180px;  margin:0;  padding:5px;
  /*border-radius*/  -webkit-border-radius:150px;     -moz-border-radius:150px;          border-radius:150px;}.circle{  width:150px;  height:150px;  margin:5px;  padding:5px;
  /*border-radius*/  -webkit-border-radius:150px;     -moz-border-radius:150px;          border-radius:150px;}.circle img{  width:  150px;  height: 150px;}
/*===================  Basic colors===================*/#tiempo{  text-shadow:0 2px 2px #252525;  color:#DADADA;}.circle-main{  background:#EB4646;  border:10px inset #A04141;
  /*box-shadow*/  -webkit-box-shadow:0 1px 10px #490000,inset 0 0 5px 3px #942828;     -moz-box-shadow:0 1px 10px #490000,inset 0 0 5px 3px #942828;          box-shadow:0 1px 10px #490000,inset 0 0 5px 3px #942828;}.circle-inner{  background:#FC7979;  border:5px inset #D13030;
  /*box-shadow*/  -webkit-box-shadow:0 0 10px #750D0D,inset 0 0 2px 4px #AA3131;     -moz-box-shadow:0 0 10px #750D0D,inset 0 0 2px 4px #AA3131;          box-shadow:0 0 10px #750D0D,inset 0 0 2px 4px #AA3131;}.circle{  background:#DF7070;  border:5px inset #D52D2D;
  /*box-shadow*/  -webkit-box-shadow:0 2px 3px #D14242,inset 0 0 9px 3px #8D1B1B;     -moz-box-shadow:0 2px 3px #D14242,inset 0 0 9px 3px #8D1B1B;          box-shadow:0 2px 3px #D14242,inset 0 0 9px 3px #8D1B1B;}/*===================  Basic sequences===================*/.circle-top-line,.circle-bottom-line{  /*animation*/  -webkit-animation:circleLine 13s infinite ease-in-out;     -moz-animation:circleLine 13s infinite ease-in-out;      -ms-animation:circleLine 13s infinite ease-in-out;       -o-animation:circleLine 13s infinite ease-in-out;          animation:circleLine 13s infinite ease-in-out;}@-webkit-keyframes circleLine{  from{width:0;background-color:#DF7070;}  to{width:100%;background-color:#46BDEB;}}@-moz-keyframes circleLine{  from{width:0;background-color:#DF7070;}  to{width:100%;background-color:#46BDEB;}}@-ms-keyframes circleLine{  from{width:0;background-color:#DF7070;}  to{width:100%;background-color:#46BDEB;}}@-o-keyframes circleLine{  from{width:0;background-color:#DF7070;}  to{width:100%;background-color:#46BDEB;}}@keyframes circleLine{  from{width:0;background-color:#DF7070;}  to{width:100%;background-color:#46BDEB;}}
.circle-main{  /*animation*/  -webkit-animation:main 20s infinite ease-in-out;     -moz-animation:main 20s infinite ease-in-out;      -ms-animation:main 20s infinite ease-in-out;       -o-animation:main 20s infinite ease-in-out;          animation:main 20s infinite ease-in-out;}@-webkit-keyframes main{  0%{-webkit-transform: rotate(360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#E9D925; border-color:#70C0DF;}  100%{background:#DF7070;border-color:#8D1B1B;}}@-moz-keyframes main{  0%{-webkit-transform: rotate(360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#E9D925; border-color:#70C0DF;}  100%{background:#DF7070;border-color:#8D1B1B;}}@-ms-keyframes main{  0%{-webkit-transform: rotate(360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#E9D925; border-color:#70C0DF;}  100%{background:#DF7070;border-color:#8D1B1B;}}@-o-keyframes main{  0%{-webkit-transform: rotate(360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#E9D925; border-color:#70C0DF;}  100%{background:#DF7070;border-color:#8D1B1B;}}@keyframes main{  0%{-webkit-transform: rotate(360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#E9D925; border-color:#70C0DF;}  100%{background:#DF7070;border-color:#8D1B1B;}}
.circle-inner{  /*animation*/  -webkit-animation:inner 15s infinite ease-in-out;     -moz-animation:inner 15s infinite ease-in-out;      -ms-animation:inner 15s infinite ease-in-out;       -o-animation:inner 15s infinite ease-in-out;          animation:inner 15s infinite ease-in-out;}@-webkit-keyframes inner{  0%{-webkit-transform: rotate(-360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#70DF82;border-color:#E9D925;}  100%{background:#DF7070;border-color:#8D1B1B;}}@-moz-keyframes inner{  0%{-webkit-transform: rotate(-360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#70DF82;border-color:#E9D925;}  100%{background:#DF7070;border-color:#8D1B1B;}}@-ms-keyframes inner{  0%{-webkit-transform: rotate(-360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#70DF82;border-color:#E9D925;}  100%{background:#DF7070;border-color:#8D1B1B;}}@-o-keyframes inner{  0%{-webkit-transform: rotate(-360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#70DF82;border-color:#E9D925;}  100%{background:#DF7070;border-color:#8D1B1B;}}@keyframes inner{  0%{-webkit-transform: rotate(-360deg);background:#DF7070;border-color:#8D1B1B;}  50% {background:#70DF82;border-color:#E9D925;}  100%{background:#DF7070;border-color:#8D1B1B;}}

.circle{  /*animation*/  -webkit-animation:circle 10s infinite ease-in-out;     -moz-animation:circle 10s infinite ease-in-out;      -ms-animation:circle 10s infinite ease-in-out;       -o-animation:circle 10s infinite ease-in-out;          animation:circle 10s infinite ease-in-out;}@-webkit-keyframes circle{  0%{-webkit-transform: rotate(360deg);border-color:#8D1B1B;}  50% {border-color:#70DF82; background:#70C0DF;}  100%{border-color:#8D1B1B; }}@-moz-keyframes circle{  0%{-webkit-transform: rotate(360deg);border-color:#8D1B1B;}  50% {border-color:#70DF82; background:#70C0DF;}  100%{border-color:#8D1B1B; }}@-ms-keyframes circle{  0%{-webkit-transform: rotate(360deg);border-color:#8D1B1B;}  50% {border-color:#70DF82; background:#70C0DF;}  100%{border-color:#8D1B1B; }}@-o-keyframes circle{  0%{-webkit-transform: rotate(360deg);border-color:#8D1B1B;}  50% {border-color:#70DF82; background:#70C0DF;}  100%{border-color:#8D1B1B; }}@keyframes circle{  0%{-webkit-transform: rotate(360deg);border-color:#8D1B1B;}  50% {border-color:#70DF82; background:#70C0DF;}  100%{border-color:#8D1B1B; }}    /*]]>*/</style>

Second : Copy given below code and paste after <body> section.
<div id='loader'>
<div class='circle-main'> <div class='circle-inner'> <div class='circle' id='time'>0 %</div> </div> </div>    </div>
Third : Given below java script code and paste before </body> section.

<script type='text/javascript'>start = 0;end = 100;$(window).ready(function(){ tmp = setInterval(countUp,5);}); function countUp(){ start++; time = $(&quot;#time&quot;); time.html( start + &quot;%&quot;); if (start === end){ clearInterval(tmp); p = $(&quot;#loader&quot;); p.fadeOut(&#39;fast&#39;,function(){ $(&#39;body&#39;).append(&#39;&#39;); }); }}      </script>

  • Save all code and see your website.
All Work Done.
Customization:
  • manually Customise  start ant end code.
start = 0;end = 100;
  •  Set your timeinterval according to you eg. 5, 10 , 15....[setInterval(countUp,10)]
tmp = setInterval(countUp,5);

Some Usefull Website Tip and Tricks on Preload Jquery Plugin Article →
Code Resource : http://nakome.com [ By Moncho Varela ].

Mohan Singh

0 comments:

Post a Comment

SUBSCRIBE

Subscribe now to get notified about exclusive offers from Us every Weeks!