How To Make Preloader to Website with Jquery Preloadme

Posted on February 17th, 2018, 448 viewed

repost the second tutorial from the old blog Usagilabs, this tutorial is how to create preloader using Jquery PreLoadMe. this is one request from a friend who wants to make his blog has preloader effect.

preloader

the third request is how to make anti adblock, which I will make with some modifications inspired from blogs of others. and I will test first before making the tutorial.

See Also :Tools – Download Box Generator
How to Install Font Awesome 5
Easy Way To Make Back To Top Button Simple

so on this occasion I will discuss how to create the effect preloader page use jquery PreLoadMe and loaders.css for a animation Loading very cool and I prepared other effect which I think is nice.. this jquery highly responsive can run on all types of mobile devices and desktop browsers.

This 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. Because the simplicity of PreLoadMe, it can be easily customized and adapted to your needs.

How to Create a Preloader Effect on blog

1. Sign in to Blogger
2. Your Blog > Theme > Edit HTML
3. Search code </head>
4. Put HTML below just above the code </head>

<script type="text/javascript">
//<![CDATA[
// PreLoadMe https://github.com/niklausgerber/PreLoadMe
$(window).on("load",function(){var d=1500;$("#status").delay(d).fadeOut(),$("#preloader").delay(d).fadeOut("slow"),$("body").delay(d).css({overflow:"visible"})});
//]]>
</script>
6. Search code ]]></b:skin> or </style>
7. Put CSS below just above the code ]]></b:skin> or </style>
/* PreLoadMe - Yuukithemes */
#preloader{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#7EC169;z-index:99}
#status{width:130px;height:130px;position:absolute;left:50%;top:50%;margin:-100px 0 0 -100px;text-align:center}
#status .loader-img{width:100%;}
#status b{margin:15px auto;display:block;font-family:'Roboto','Open Sans','Segoe UI',Arial,sans-serif;text-transform:uppercase;letter-spacing:2px;color:#FFF;text-align:center;}
/* Effect by loader.css */
/* Default */
@keyframes rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.ball-clip-rotate > div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;border:2px solid #fff;border-bottom-color:transparent;height:26px;width:26px;background:transparent!important;display:inline-block;-webkit-animation:rotate 0.75s 0s linear infinite;animation:rotate 0.75s 0s linear infinite}
8. Search code <body>
9. Put HTML below just under the code <body>
<div id='preloader'>
  <div id='status'>
    <img class='loader-img' src='https://1.bp.blogspot.com/-nCAISkaZVtY/WNAMDVS7JWI/AAAAAAAAAnw/fVTmHs32Xhw-ODpTF7mc5ZJnpkVcGuZ5gCLcB/s150/chibi_yoshino_by_kurama_chan.png'/>
  <b>Loading</b>
    <div class='loader-inner ball-clip-rotate'><div></div></div>
  </div>
</div>
10. Save Theme
and for the results please see below

Other Css PreLoader Style

Ball Scale Multiple


CSS
add css below just after /* Effect by loader.css */

/* Ball Scale Multiple */
#status .ball-scale-multiple{margin:auto;width:0;margin-top:40px}@-webkit-keyframes ball-scale-multiple{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}5%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@keyframes ball-scale-multiple{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}5%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.ball-scale-multiple{position:relative;-webkit-transform:translateY(-30px);transform:translateY(-30px)}.ball-scale-multiple > div:nth-child(2){-webkit-animation-delay:-0.4s;animation-delay:-0.4s}.ball-scale-multiple > div:nth-child(3){-webkit-animation-delay:-0.2s;animation-delay:-0.2s}.ball-scale-multiple > div{background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;left:-30px;top:0;opacity:0;margin:0;width:60px;height:60px;-webkit-animation:ball-scale-multiple 1s 0s linear infinite;animation:ball-scale-multiple 1s 0s linear infinite}
HTML
for HTML please replace the first code (under the code <body>)
<div id='preloader'>
  <div id='status'>
    <img class='loader-img' src='https://3.bp.blogspot.com/-RBlLsvSinm0/WNAMEMFS7HI/AAAAAAAAAn0/iHu3ixTZMFYHcR-t4EMGsK5D9f3kQZQbgCLcB/s150/nekopoi_kawai.png'/>
  <b>Loading</b>
    <div class="loader-inner ball-scale-multiple"><div></div><div></div><div></div></div>
  </div>
</div>

Ball Square Spin


CSS
add css below just after /* Effect by loader.css */

/* Ball Square Spin */
#status .square-spin{margin:auto;width:55px;margin-top:20px}
@-webkit-keyframes square-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}@keyframes square-spin{25%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(0);transform:perspective(100px) rotateX(180deg) rotateY(0)}50%{-webkit-transform:perspective(100px) rotateX(180deg) rotateY(180deg);transform:perspective(100px) rotateX(180deg) rotateY(180deg)}75%{-webkit-transform:perspective(100px) rotateX(0) rotateY(180deg);transform:perspective(100px) rotateX(0) rotateY(180deg)}100%{-webkit-transform:perspective(100px) rotateX(0) rotateY(0);transform:perspective(100px) rotateX(0) rotateY(0)}}.square-spin > div{-webkit-animation-fill-mode:both;animation-fill-mode:both;width:50px;height:50px;background:#fff;-webkit-animation:square-spin 3s 0s cubic-bezier(0.09,0.57,0.49,0.9) infinite;animation:square-spin 3s 0s cubic-bezier(0.09,0.57,0.49,0.9) infinite}
HTML
for HTML please replace the first code (under the code <body>)
<div id='preloader'>
  <div id='status'>
    <img class='loader-img' src='https://2.bp.blogspot.com/-ILQZOTTaVnE/WNAMC_o_V_I/AAAAAAAAAns/r_5Jc3d-nb0hawJutEiriaYPpCOVPj-wwCLcB/s150/nekopoi_pret.png'/>
  <b>Loading</b>
    <div class="loader-inner square-spin"><div></div></div>
  </div>
</div>

Pacman Style


CSS
add css below just after /* Effect by loader.css */

/* Pacman Style */
#status .pacman{margin:auto;width:0px;margin-top:20px}
@-webkit-keyframes rotate_pacman_half_up{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}50%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@keyframes rotate_pacman_half_up{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}50%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@-webkit-keyframes rotate_pacman_half_down{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}50%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@keyframes rotate_pacman_half_down{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}50%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@-webkit-keyframes pacman-balls{75%{opacity:0.7}100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px)}}@keyframes pacman-balls{75%{opacity:0.7}100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px)}}.pacman{position:relative}.pacman > div:nth-child(2){-webkit-animation:pacman-balls 1s -0.99s infinite linear;animation:pacman-balls 1s -0.99s infinite linear}.pacman > div:nth-child(3){-webkit-animation:pacman-balls 1s -0.66s infinite linear;animation:pacman-balls 1s -0.66s infinite linear}.pacman > div:nth-child(4){-webkit-animation:pacman-balls 1s -0.33s infinite linear;animation:pacman-balls 1s -0.33s infinite linear}.pacman > div:nth-child(5){-webkit-animation:pacman-balls 1s 0s infinite linear;animation:pacman-balls 1s 0s infinite linear}.pacman > div:first-of-type{width:0;height:0;border-right:25px solid transparent;border-top:25px solid #fff;border-left:25px solid #fff;border-bottom:25px solid #fff;border-radius:25px;-webkit-animation:rotate_pacman_half_up 0.5s 0s infinite;animation:rotate_pacman_half_up 0.5s 0s infinite;position:relative;left:-30px}.pacman > div:nth-child(2){width:0;height:0;border-right:25px solid transparent;border-top:25px solid #fff;border-left:25px solid #fff;border-bottom:25px solid #fff;border-radius:25px;-webkit-animation:rotate_pacman_half_down 0.5s 0s infinite;animation:rotate_pacman_half_down 0.5s 0s infinite;margin-top:-50px;position:relative;left:-30px}.pacman > div:nth-child(3),.pacman > div:nth-child(4),.pacman > div:nth-child(5),.pacman > div:nth-child(6){background-color:#fff;width:15px;height:15px;border-radius:100%;margin:2px;width:10px;height:10px;position:absolute;-webkit-transform:translate(0,-6.25px);transform:translate(0,-6.25px);top:25px;left:70px}
HTML
for HTML please replace the first code (under the code <body>)
<div id='preloader'>
  <div id='status'>
    <img class='loader-img' src='https://2.bp.blogspot.com/-GDzylzDpGHw/WNAMEb1wlsI/AAAAAAAAAn4/P5y8c-N3h74x9Ij2vJ8TEURVaIgIDPqogCLcB/s150/nekopoi_wtf.png'/>
  <b>Loading</b>
    <div class="loader-inner pacman"><div></div><div></div><div></div><div></div><div></div></div>
  </div>
</div>

Related Post

Please wait....
Disqus comment box is being loaded