Cara Membuat Efek Loading Keren di dalam Blog

Oleh Renna

Memasang Efek Loading Didalam Blog Saat Halaman Dimuat

Ada banyak cara yang dlakukan untuk mempercantik tampilan blog, salah satunya dengan cara memasang efek preloading atau sering disebut efek loading.

Efek loading akan bekerja pada saat halaman blog dimuat. Dan memberi kesan seolah-olah blog yang kita akses loadingnya sangat lama. Efek loading yang telah kita pasang didalam blog akan hilang setelah halaman tersebut termuat secara keseluruhan.

Memasang efek loading dihalaman blog tidak akan berpengaruh terhadap kecepatan loading blog kita, hal tersebut dikarenakan efek yang digunakan murni menggunakan CSS dan SVG tanpa menyisipkan gambar.

Ada beberapa pilihan efek loading yang akan kored id bagikan kali ini, dengan masing-masing kode css dan HTML nya. Jadi kalian bisa memilih sesuai keinginan kalian. Oke langsung saja,

Baca Juga :

Memasang Efek Loading di Halaman Blog

Hal pertama yang harus kalian lakukan sebelum memasang efek loading yang akan saya bagikan kali ini. Ada baiknya kalian melihat dulu versi JQuery didalam template blog yang kalian gunakan agar kode berjalan dengan baik.

Jika Versi JQuery di dalam template kalian sama dengan JQuery Versi dibawah ini, kalian tidak usah menggantinya. Jika berbeda silahkan ganti dengan JQuery Library Versi 1.7.1 dibawah ini

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

Langkah selanjutnya ialah,
1. Masih di Dashboard Blogger
2. Pilih Tema -> Edit HTML
3. Cari kode </body> atau </body> (Gunakan ctrl+f untuk mencarinya)
4. Tambahkan kode dibawah ini sebelum kode </body> atau </body>

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

5. Langkah selanjutnya ialah menambahkan kode HTML dibawah ini tepat dibawah kode <body>

<div id='preloader'>
<svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='http://www.w3.org/2000/svg'>
   <circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/>
</svg>
</div>

6. Kemudian tambahkan kode CSS ini sebelum kode </head> atau </head>

<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite}
@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}
.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}
@keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}}
@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}
</style>

7. Lalu, Simpan Tema dan lihat hasilnya.

Result

Untuk pilihan efek loading lainya, kalian bisa menentukan sendiri efek loading mana yang kalian suka. Saya sudah sediakan bebrapa pilihan efek loading keren dibawah

Cara pemasangannya kurang lebih sama dengan langkah diatas, kalian tinggal mengganti HTML dan CSS untuk mengganti atau menggunakan efek loading lainya. Tanpa harus menambahkan kembali kode JQuery nya.

Baca Juga :

Efek PreLoading Reverse Dot
Kode HTML

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

Kode CSS

<style type='text/css'>
/* Preloader */
#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>

Result

Efek PreLoading Spring Line
Kode HTML

<div id='preloader'>
<div id='container' class='spinner'>
  <div id='loader'></div>  
</div>
</div>

Kode CSS

<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#00cec9;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#container{width:70px;height:35px;overflow:hidden;position:absolute;top:calc(50% - 17px);left:calc(50% - 35px)}
#loader{width:70px;height:70px;border-style:solid;border-top-color:#FFF;border-right-color:#FFF;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;box-sizing:border-box;animation:rotate 3s ease-in-out infinite;transform:rotate(-200deg)}
@keyframes rotate{0%{border-width:10px}25%{border-width:3px}50%{transform:rotate(115deg);border-width:10px}75%{border-width:3px}100%{border-width:10px}}
</style>

Result

Efek PreLoading Spinner Ball
Kode 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>

Kode CSS

<style type='text/css'>
/* Preloader */
#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>

Result

Efek PreLoading Google Chrome
Kode HTML

<div id='preloader'>
<div class='spinner'>
<div class='loader tri'></div>
<div class='loader tri2'></div>
<div class='loader tri3'></div>
<div class='loader tri4'></div>
<div class='loader circ'></div>
<div class='loader circ2'></div>
</div>
</div>

Kode CSS

<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#ecf0f1;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.loader{border-radius:50%;margin:0 auto;position:absolute;top:40%;left:0;right:0;height:50px;width:50px}
.tri{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:0 solid transparent;border-bottom:60px solid #00b4ff;width:0;z-index:2}
.tri2{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:0 solid transparent;border-bottom:40px solid #ffde15;width:0;z-index:1}
.tri3{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:40px solid #1da158;border-bottom:0 solid transparent;width:0;z-index:1}
.tri4{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:60px solid #ea343f;border-bottom:0 solid transparent;width:0;z-index:2}
.circ{border:30px solid rgba(255,255,255,0.1)}
.circ2{border:25px solid #ffffff;box-sizing:border-box;box-shadow:0 2px 1px rgba(0,0,0,0.15),0 -2px 1px rgba(0,0,0,0.15),-2px 0 1px rgba(0,0,0,0.15),2px 0 1px rgba(0,0,0,0.15);margin-top:30px;z-index:90}
@-webkit-keyframes translateRotation{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}
</style>

Result

Efek PreLoading Circular
Kode HTML

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

Kode CSS

<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#loader{position:absolute;top:50%;left:50%;margin:-20px -50px;height:30px;width:30px;margin:auto;border:5px solid rgba(60,60,180,0.45);border-top:5px solid rgb(60,60,180);border-radius:50%;animation:rotate 1s infinite linear}
@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
</style>

Result

Efek PreLoading Moving Dot
Kode HTML


<div id='preloader'>
<div class='spinner'>
  <div class='loader'>
    <div class='moving-dot'></div>
    <div class='moving-dot'></div>
    <div class='moving-dot'></div>
    <div class='moving-dot'></div>
    <div class='moving-dot'></div>
    <div class='moving-dot'></div>
  </div>
</div>
</div>

Kode CSS

<style type='text/css'>
/* Preloader */
#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}
.loader{height:20px;width:250px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}
.moving-dot{animation-name:loader;animation-timing-function:ease-in-out;animation-duration:3s;animation-iteration-count:infinite;height:20px;width:20px;border-radius:100%;background-color:black;position:absolute;border:2px solid white}
.moving-dot:first-child{background-color:#8cc759;animation-delay:0.5s}
.moving-dot:nth-child(2){background-color:#8c6daf;animation-delay:0.4s}
.moving-dot:nth-child(3){background-color:#ef5d74;animation-delay:0.3s}
.moving-dot:nth-child(4){background-color:#f9a74b;animation-delay:0.2s}
.moving-dot:nth-child(5){background-color:#60beeb;animation-delay:0.1s}
.moving-dot:nth-child(6){background-color:#fbef5a;animation-delay:0s}
@keyframes loader{15%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}}
</style>

Result

Jika kalian merasa kurang suka dengan efek-efek loading yang saya bagikan diatas. Silahkan kunjungi sendiri situs penyedia loadingnya di icons8.com/cssload

Demikian Cara Membuat Efek Loading Keren di Dalam Blog. Semoga bisa diterapkan didalam blog kalian Dan terimakasih atas kunjungannya.

Sumber Kode : Arlina Design

Kored ID

Widget HTML Atas

Cara Membuat Efek Loading Keren di dalam Blog