How to create animated preloader with Jquery PreloadMe

By 11
Hi Everyone...a few weeks ago I was busy making new Theme for my blog so that I have not had time to share a tutorial. and this is the result now, how in your opinion ?? hehehe certainly more awesome ; v of the previous design that is less unsightly.

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. YourBlog Theme Edit HTML
3. Search code </head>
4. Put HTML below just above the code </head>
<b:if cond="data:blog.url == data:blog.homepageUrl"><script type="text/javascript">
//<![CDATA[
// PreLoadMe https://github.com/niklausgerber/PreLoadMe
$(window).on("load",function(){var a=350;$("#status").delay(a).fadeOut(),$("#preloader").delay(a).fadeOut("slow")});
//]]>
</script></b:if>
6. Search code ]]></b:skin> atau </style>
7. Put CSS below just above the code ]]></b:skin> atau </style>
/* PreLoadMe - Usagilabs */
#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>
<b:if cond="data:blog.url == data:blog.homepageUrl"><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></b:if>
10. Save Theme

and for the results please see below

Other loader 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>)
<b:if cond="data:blog.url == data:blog.homepageUrl"><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></b:if>
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>)
<b:if cond="data:blog.url == data:blog.homepageUrl"><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></b:if>
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>)
<b:if cond="data:blog.url == data:blog.homepageUrl"><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></b:if>
Hai Minna... beberapa minggu kemarin saya sedang sibuk dengan membuat Theme baru untuk blog saya sehingga saya belum sempat share tutorial. dan inilah hasilnya sekarang, gimana menurut pendapat sobat?? hehehe tentunya lebih mantap jiwa ya ;v dari pada desain sebelumnya yang kurang enak diliat, tapi kouta ane ikut habis juga buat nyari referensi desainnya wkwkwkw.

sehingga pada kesempatan ini saya akan membahas cara membuat efek halaman preloader menggunakan jquery PreLoadMe dan loaders.css untuk animasi Loading yang sangat keren saya sudah sediakan beberapa effect yang menurut saya bagus.. jquery ini sangat responsif dapat dijalankan pada semua jenis device desktop dan mobile browser.

Preloader ini yaitu efek animasi loading, ketika sobat baru membuka blog maka efek loading muncul dan akan hilang ketika konten blog sudah terload, jquery preloader juga dapat di modifikasi sesuai kreatif sobat.

Cara Membuat Efek Preloader di blog

1. Masuk ke Blogger
2. Blogmu Theme Edit HTML
3. Cari kode </head>
4. Masukan HTML dibawah ini tepat diatas kode </head>
<b:if cond="data:blog.url == data:blog.homepageUrl"><script type="text/javascript">
//<![CDATA[
// PreLoadMe https://github.com/niklausgerber/PreLoadMe
$(window).on("load",function(){var a=350;$("#status").delay(a).fadeOut(),$("#preloader").delay(a).fadeOut("slow")});
//]]>
</script></b:if>
6. Cari kode ]]></b:skin> atau </style>
7. Masukan CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>
/* PreLoadMe - Usagilabs */
#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. Cari kode <body>
9. Masukan HTML dibawah ini tepat dibawah kode <body>
<b:if cond="data:blog.url == data:blog.homepageUrl"><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></b:if>
10. Simpan Theme

dan untuk hasilnya silahkan lihat dibawah ini

Desain Loader lainnya

Ball Scale Multiple
untuk CSS
tambahkan css dibawah ini tepat sesudah /* 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}
untuk HTML
untuk HTML silahkan ganti / timpa dengan kode yang pertama (berada dibawah kode <body>)
<b:if cond="data:blog.url == data:blog.homepageUrl"><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></b:if>
Ball Square Spin
untuk CSS
tambahkan css dibawah ini tepat sesudah /* 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}
untuk HTML
untuk HTML silahkan ganti / timpa dengan kode yang pertama (berada dibawah kode <body>)
<b:if cond="data:blog.url == data:blog.homepageUrl"><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></b:if>
Pacman Style
untuk CSS
tambahkan css dibawah ini tepat sesudah /* 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}
untuk HTML
untuk HTML silahkan ganti / timpa dengan kode yang pertama (berada dibawah kode <body>)
<b:if cond="data:blog.url == data:blog.homepageUrl"><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></b:if>
Share on Facebook Tweet on Twitter Share on Google+
author
UsagilabsRealase at

nothing ._.

You Might Also Like

Comment now

11 comments

      • avatar
        Anime QIB

        maksud saya kok scroll jd hilang yakh gimana nih,jd nggak bisa liat post bawah nya min : scroll nya maksud saya yang kayak gini : https://4.bp.blogspot.com/-Lmc3Mlci9eI/WNDHodbodZI/AAAAAAAAAN4/y2N4yKBFUTsWT8vtkQHDdijvo75oy5BMACLcB/s1600/Snapshot_2017-3-21_13-23-25.jpg