Bagaimana Cara Kerja Preloader Ini?

Efek transisi preloader ini akan muncul sebelum konten dalam halaman blog kamu di muat secara keseluruhan. Dan jika seluruh konten halaman blog sudah di muat penuh, maka efek transisi preloader ini akan hilang.

Apakah Preloader Memberatkan Loading Blog?

Tentu saja tidak. Karena preloader ini menggunakan murni CSS yang sudah di minifer agar ukurannya ringan. Selain itu preloader ini juga tidak menggunakan gambar atau gif sama sekali. Sebagi gantinya, animasi yang digunakan menggunakan SVG.

Bagaimana Cara Membuat Dan Memasang Preloader Yang Keren Di Blog?

Cara membuat dan memasang efek preloader ini sangatlah mudah. Cukup menambahkan CSS preloader ke dalam template kemudian diiringi dengan jQuery dan HTML sebagai elemen pemanggil CSS.

Membuat dan Memasang Efek Preloader Keren di Blog

Cara Membuat dan Memasang Efek Preloader Super Keren Di Blog Tanpa Memberatkan Loading Blog - Preloader merupakan salah satu efek animasi yang muncul sebelum konten blog di muat dan di tampilkan. Efek preloader ini cocok banget bagi kamu yang lebih mengutamakan kualitas dan desain blog.

Tak ayal mengapa efek preloader seperti ini sering kali dijadikan sebagai cara untuk menghias blog atau website agar tampilan menjadi lebih cantik dan keren. Script yang saya gunakan untuk membuat efek animasi preloader ini dengan menggunakan CSS dan sedikit script jQuery yang akan di taruh ke dalam template blog.

Dan kamu juga tidak perlu khawatir untuk masalah kecepatan atau performa loading blog kamu setelah memasang efek animasi preloader ini. Karena efek animasi yang saya berikan ini sangat-sangat ringan banget dan untuk desainnya sendiri menggunakan SVG.

Bagaimana Cara Kerja Dari Preloader Ini?

Seperti yang sudah di singgung di awal percakapan di atas, cara kerja dari efek animasi preloader ini adalah sebuah efek transisi yang akan muncul di halaman blog sebelum konten dan halaman blog di muat secara keseluruhan.

Jadi saat halaman blog sedang di muat (belum di muat penuh), maka efek animasi preloader atau transisi ini akan muncul dan akan kembali hilang setelah halaman tersebut di muat secara keseluruhan atau sempurna.

Apakah Efek Transisi Preloader Ini Memberatkan Loading Blog?

Tentu saja tidak sama sekali (mungkin sedikitlah yah karena CSS yang kita taruh ke dalam template). Efek transisi preloader ini menggunakan script CSS yang sangat ringan dan murni. Dan tidak ada gambar atau gif sama sekali. Jadi kamu tidak perlu khawatir efek preloader ini akan menurunkan performa loading blog kamu.

Cara Membuat dan Memasang Efek Transisi Preloader Super Keren Di Blog

Buka dashboard blogger kamu
Masuk ke menu Theme ➤ Edit HTML

Kemudian taruh CSS dibawah ini tepat diatas tag penutup </head>

<style>
/* Preloader */
#preloader{overflow:hidden;background:#FA3663;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{list-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.loader{height:100%;width:100%}
.loader .l_main{position:absolute;top:50%;left:50%;width:172px;height:128px;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
@media (max-width:550px){.loader{-webkit-transform:scale(0.75);transform:scale(0.75)}}
@media (max-width:440px){.loader{-webkit-transform:scale(0.5);transform:scale(0.5)}}
.l_square{position:relative}
.l_square:nth-child(1){margin-left:0px}
.l_square:nth-child(2){margin-left:44px}
.l_square:nth-child(3){margin-left:88px}
.l_square:nth-child(4){margin-left:132px}
.l_square span{position:absolute;top:0px;left:20px;height:36px;width:36px;border-radius:2px;background-color:#FFFFFF}
.l_square span:nth-child(1){top:0px}
.l_square span:nth-child(2){top:44px}
.l_square span:nth-child(3){top:88px}
.l_square:nth-child(1) span{-webkit-animation:animsquare1 2s infinite ease-in;animation:animsquare1 2s infinite ease-in}
.l_square:nth-child(2) span{-webkit-animation:animsquare2 2s infinite ease-in;animation:animsquare2 2s infinite ease-in}
.l_square:nth-child(3) span{-webkit-animation:animsquare3 2s infinite ease-in;animation:animsquare3 2s infinite ease-in}
.l_square:nth-child(4) span{-webkit-animation:animsquare4 2s infinite ease-in;animation:animsquare4 2s infinite ease-in}
.l_square span:nth-child(1){-webkit-animation-delay:0.00s;animation-delay:0.00s}
.l_square span:nth-child(2){-webkit-animation-delay:0.15s;animation-delay:0.15s}
.l_square span:nth-child(3){-webkit-animation-delay:0.30s;animation-delay:0.30s}
@keyframes animsquare1{0%,5%,95%,100%{transform:translate(0px,0px) rotate(0deg)}30%,70%{transform:translate(-40px,0px) rotate(-90deg)}}
@keyframes animsquare2{0%,10%,90%,100%{transform:translate(0px,0px) rotate(0deg)}35%,65%{transform:translate(-40px,0px) rotate(-90deg)}}
@keyframes animsquare3{0%,15%,85%,100%{transform:translate(0px,0px) rotate(0deg)}40%,60%{transform:translate(-40px,0px) rotate(-90deg)}}
@keyframes animsquare4{0%,20%,80%,100%{transform:translate(0px,0px) rotate(0deg)}45%,55%{transform:translate(-40px,0px) rotate(-90deg)}}
</style>

Setelah itu tambahkan kode dibawah ini setelah tag <body>

<div id='preloader'>
<div class='loader spinner'>
<div class='l_main'>
  <div class='l_square'><span></span><span></span><span></span></div>
  <div class='l_square'><span></span><span></span><span></span></div>
  <div class='l_square'><span></span><span></span><span></span></div>
  <div class='l_square'><span></span><span></span><span></span></div>
</div>
</div>
</div>

Langkah terakhir tambahkan jQuery ke dalam template blog kamu. Taruh sebelum tag </body>

<script>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>

Jika semua script sudah terpasang dengan benar sesuai langkah-langkah di atas, klik simpan dan lihat hasilnya

See the Pen Preloder Keren by Rifqi (@dzuhalah) on CodePen.

Sampai disini efek transisi preloader sudah berhasil di pasang ke dalam blog. Selain efek preloader berbentuk square seperti diatas, masih ada efek preloader keren lainnya. Kamu bisa pilih salah satu bentuk atau efek preloader dibawah ini. Untuk cara pemasangannya sama. CSS taruh diatas </head> dan untuk HTML taruh dibawah tag <body>.

Animasi preloader Lainnya

1. Bounce :

HTML :

<div id='preloader'>
<div id='container' class='spinner'>
  <div id='dot'></div>
    <div class='step' id='s1'></div>
    <div class='step' id='s2'></div>
    <div class='step' id='s3'></div>
</div>
</div>

CSS :

<style>
/* Preloader Bounce */
#preloader{overflow:hidden;background:#54B4F5;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#container{margin:-45px -60px;width:120px;height:90px;position:absolute;top:50%;left:50%}
#dot{background:#FFF;border-radius:50%;width:30px;height:30px;position:absolute;bottom:30px;left:27px;transform-origin:center bottom;animation:dot .6s ease-in-out infinite}
@-webkit-keyframes dot{0%{transform:scale(1,.7)}20%{transform:scale(.7,1.2)}40%{transform:scale(1,1)}50%{bottom:100px}46%{transform:scale(1,1)}80%{transform:scale(.7,1.2)}90%{transform:scale(.7,1.2)}100%{transform:scale(1,.7)}}
.step{position:absolute;width:30px;height:30px;border-top:2px solid #FFF;top:0;right:0}
@-webkit-keyframes anim{0%{opacity:0;top:0;right:0}50%{opacity:1}100%{top:90px;right:90px;opacity:0}}
#s1{animation:anim 1.8s linear infinite}
#s2{animation:anim 1.8s linear infinite -.6s}
#s3{animation:anim 1.8s linear infinite -1.2s}
</style>

2. Elegan Circle :

HTML :

<div id='preloader'>
<div class='spinner'>
  <div class='inner one'></div>
  <div class='inner two'></div>
  <div class='inner three'></div>
</div>
</div>

CSS :

<style>
/* Preloader Elegan Circle */
#preloader{overflow:hidden;background:#2c3e50;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:calc(50% - 32px);left:calc(50% - 32px);width:64px;height:64px;border-radius:50%;perspective:800px}
.inner{position:absolute;box-sizing:border-box;width:100%;height:100%;border-radius:50%}
.inner.one{left:0%;top:0%;animation:rotate-one 1s linear infinite;border-bottom:3px solid #EFEFFA}
.inner.two{right:0%;top:0%;animation:rotate-two 1s linear infinite;border-right:3px solid #EFEFFA}
.inner.three{right:0%;bottom:0%;animation:rotate-three 1s linear infinite;border-top:3px solid #EFEFFA}
@keyframes rotate-one{0%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}100%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}
@keyframes rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}100%{transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}
@keyframes rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}100%{transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}
</style>

3. Reverded Dot :

HTML :

<div id='preloader'>
<div class='spinner'>
<ul class='loading reversed'>
      <li></li>
      <li></li>
      <li></li>
    </ul>
</div>
</div>

CSS :

<style>
/* Preloader Reversed Dot */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{list-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.loading.reversed li{list-style:none;border:3px solid #2b8ccd;animation:LOADING 2s infinite}
.loading.reversed li:nth-child(1n){animation-delay:0s}
.loading.reversed li:nth-child(2n){animation-delay:0.2s}
.loading.reversed li:nth-child(3n){animation-delay:0.4s}
.loading li{height:0;position:absolute;top:50%;left:0;width:0;margin:0;height:10px;width:10px;border:3px solid #2b8ccd;border-radius:100%;transform:transformZ(0);animation:LOADING 2s infinite}
.loading li:nth-child(1n){left:-20px;animation-delay:0s}
.loading li:nth-child(2n){left:0;animation-delay:0.2s}
.loading li:nth-child(3n){left:20px;animation-delay:0.4s}
@keyframes LOADING{0%{transform:scale(0.5);background:#2b8ccd}50%{transform:scale(1);background:#fff}100%{transform:scale(0.5);background:#2b8ccd}}
</style>

4. Spinner Ball :

HTML :

<div id='preloader'>
<div class='spinner'>
  <span class='ball-1'></span>
  <span class='ball-2'></span>
  <span class='ball-3'></span>
  <span class='ball-4'></span>
  <span class='ball-5'></span>
  <span class='ball-6'></span>
  <span class='ball-7'></span>
  <span class='ball-8'></span>
</div>
</div>

CSS :

<style>
/* Preloader Spinner Ball */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:50%;left:50%;z-index:1;height:40px;width:40px;transform:translate(-50%,-50%)}
[class^="ball-"]{position:absolute;display:block;left:30px;width:12px;height:12px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0}
@keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}}
.ball-1{z-index:-1;background-color:#2196F3;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)}
.ball-2{z-index:-2;background-color:#03A9F4;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)}
.ball-3{z-index:-3;background-color:#00BCD4;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)}
.ball-4{z-index:-4;background-color:#009688;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)}
.ball-5{z-index:-5;background-color:#4CAF50;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)}
.ball-6{z-index:-6;background-color:#8BC34A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)}
.ball-7{z-index:-7;background-color:#CDDC39;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)}
.ball-8{z-index:-8;background-color:#FFEB3B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)}
</style>

5. SVG Animation :

HTML :

<div id='preloader'>
<div class='spinner'>
<svg id="loading">
<g>
    <path class="ld-l" fill="#39C0C4" d="M43.6,33.2h9.2V35H41.6V15.2h2V33.2z"/>
    <path class="ld-o" fill="#39C0C4" d="M74.7,25.1c0,1.5-0.3,2.9-0.8,4.2c-0.5,1.3-1.2,2.4-2.2,3.3c-0.9,0.9-2,1.6-3.3,2.2
        c-1.3,0.5-2.6,0.8-4.1,0.8s-2.8-0.3-4.1-0.8c-1.3-0.5-2.4-1.2-3.3-2.2s-1.6-2-2.2-3.3C54.3,28,54,26.6,54,25.1s0.3-2.9,0.8-4.2
        c0.5-1.3,1.2-2.4,2.2-3.3s2-1.6,3.3-2.2c1.3-0.5,2.6-0.8,4.1-0.8s2.8,0.3,4.1,0.8c1.3,0.5,2.4,1.2,3.3,2.2c0.9,0.9,1.6,2,2.2,3.3
        C74.4,22.2,74.7,23.6,74.7,25.1z M72.5,25.1c0-1.2-0.2-2.3-0.6-3.3c-0.4-1-0.9-2-1.6-2.8c-0.7-0.8-1.6-1.4-2.6-1.9
        c-1-0.5-2.2-0.7-3.4-0.7c-1.3,0-2.4,0.2-3.4,0.7c-1,0.5-1.9,1.1-2.6,1.9c-0.7,0.8-1.3,1.7-1.6,2.8c-0.4,1-0.6,2.1-0.6,3.3
        c0,1.2,0.2,2.3,0.6,3.3c0.4,1,0.9,2,1.6,2.7c0.7,0.8,1.6,1.4,2.6,1.9c1,0.5,2.2,0.7,3.4,0.7c1.3,0,2.4-0.2,3.4-0.7
        c1-0.5,1.9-1.1,2.6-1.9c0.7-0.8,1.3-1.7,1.6-2.7C72.4,27.4,72.5,26.3,72.5,25.1z"/>
    <path class="ld-a" fill="#39C0C4" d="M78.2,35H76l8.6-19.8h2L95.1,35h-2.2l-2.2-5.2H80.4L78.2,35z M81.1,27.9h8.7l-4.4-10.5L81.1,27.9z"/>
    <path class="ld-d" fill="#39C0C4" d="M98,15.2h6.6c1.2,0,2.5,0.2,3.7,0.6c1.2,0.4,2.4,1,3.4,1.9c1,0.8,1.8,1.9,2.4,3.1s0.9,2.7,0.9,4.3
        c0,1.7-0.3,3.1-0.9,4.3s-1.4,2.3-2.4,3.1c-1,0.8-2.1,1.5-3.4,1.9c-1.2,0.4-2.5,0.6-3.7,0.6H98V15.2z M100,33.2h4
        c1.5,0,2.8-0.2,3.9-0.7c1.1-0.5,2-1.1,2.8-1.8c0.7-0.8,1.3-1.6,1.6-2.6s0.5-2,0.5-3c0-1-0.2-2-0.5-3c-0.4-1-0.9-1.8-1.6-2.6
        c-0.7-0.8-1.6-1.4-2.8-1.8c-1.1-0.5-2.4-0.7-3.9-0.7h-4V33.2z"/>
    <path class="ld-i" fill="#39C0C4" d="M121.2,35h-2V15.2h2V35z"/>
    <path class="ld-n" fill="#39C0C4" d="M140.5,32.1L140.5,32.1l0.1-16.9h2V35h-2.5l-11.5-17.1h-0.1V35h-2V15.2h2.5L140.5,32.1z"/>
    <path class="ld-g" fill="#39C0C4" d="M162.9,18.8c-0.7-0.7-1.5-1.3-2.5-1.7c-1-0.4-2-0.6-3.3-0.6c-1.3,0-2.4,0.2-3.4,0.7s-1.9,1.1-2.6,1.9
        c-0.7,0.8-1.3,1.7-1.6,2.8c-0.4,1-0.6,2.1-0.6,3.3c0,1.2,0.2,2.3,0.6,3.3c0.4,1,0.9,2,1.6,2.7c0.7,0.8,1.6,1.4,2.6,1.9
        s2.2,0.7,3.4,0.7c1.1,0,2.1-0.1,3.1-0.4c0.9-0.2,1.7-0.5,2.3-0.9v-6h-4.6v-1.8h6.6v9c-1.1,0.7-2.2,1.1-3.5,1.5
        c-1.3,0.3-2.5,0.5-3.9,0.5c-1.5,0-2.9-0.3-4.1-0.8s-2.4-1.2-3.3-2.2c-0.9-0.9-1.6-2-2.1-3.3s-0.8-2.7-0.8-4.2s0.3-2.9,0.8-4.2
        c0.5-1.3,1.2-2.4,2.2-3.3c0.9-0.9,2-1.6,3.3-2.2c1.3-0.5,2.6-0.8,4.1-0.8c1.6,0,3,0.2,4.1,0.7s2.2,1.1,3,2L162.9,18.8z"/>
</g>
</svg>
<svg width='182px' height='182px' xmlns="https://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ripple"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><g> <animate attributeName="opacity" dur="4s" repeatCount="indefinite" begin="0s" keyTimes="0;0.33;1" values="1;1;0"></animate><circle cx="50" cy="50" r="40" stroke="#eeeeee" fill="none" stroke-width="2" stroke-linecap="round"><animate attributeName="r" dur="4s" repeatCount="indefinite" begin="0s" keyTimes="0;0.33;1" values="0;22;44"></animate></circle></g><g><animate attributeName="opacity" dur="4s" repeatCount="indefinite" begin="2s" keyTimes="0;0.33;1" values="1;1;0"></animate><circle cx="50" cy="50" r="40" stroke="#eeeeee" fill="none" stroke-width="2" stroke-linecap="round"><animate attributeName="r" dur="4s" repeatCount="indefinite" begin="2s" keyTimes="0;0.33;1" values="0;22;44"></animate></circle></g></svg>
</div>

CSS :

<style>
/* Preloader Google Chrome */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center}
#loading{position:absolute;left:calc(50% - 100px);top:calc(50% - 25px);z-index:9999}
.uil-ripple{position:absolute;left:calc(50% - 90px);top:calc(50% - 90px);opacity:.5;z-index:999}
.ld-l{opacity:0;animation:ld-in 3s 0.0s ease infinite}
.ld-o{opacity:0;animation:ld-in 3s 0.1s ease infinite}
.ld-a{opacity:0;animation:ld-in 3s 0.2s ease infinite}
.ld-d{opacity:0;animation:ld-in 3s 0.3s ease infinite}
.ld-i{opacity:0;animation:ld-in 3s 0.4s ease infinite}
.ld-n{opacity:0;animation:ld-in 3s 0.5s ease infinite}
.ld-g{opacity:0;animation:ld-in 3s 0.6s ease infinite}
@keyframes ld-in{0%{opacity:0;transform:scale(0)}30%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
</style>

Nah, itulah tutorial singkat cara membuat dan memasang efek animasi preloader super keren di blog. Semoga bisa bermanfaat dan membantu bagi yang membutuhkan

Cindy NOTHING!!!

Bokban.my.id

Membuat dan Memasang Efek Preloader Keren di Blog

Bagaimana Cara Kerja Dari Preloader Ini?

Apakah Efek Transisi Preloader Ini Memberatkan Loading Blog?

Cara Membuat dan Memasang Efek Transisi Preloader Super Keren Di Blog

Animasi preloader Lainnya

Post a Comment for "Membuat dan Memasang Efek Preloader Keren di Blog"