Cara Memasang Loading Screen Pada Halaman Blog

Membuat Loading Screen Dengan Gambar Animasi GIF atau animasi menggunakan kode CSS yang simple dan mudah. Pilihan loading screen super premium yang didapat dari hasil searching dan blogwalking. Tutorial singkat tentang cara membuat loading screen (layar pemuatan) yang bagus pada halaman blog dengan animasi GIF dan animasi CSS yang halus dan bisa anda sesuaikan dengan mudah. Scriptnya memang berukuran cukup kecil, tapi ingat jangan gunakan gambar animasi dengan ukuran besar. Pertimbangkan juga untuk membuat blog kita tetap cepat!

Waktu pemuatan halaman jelas merupakan bagian penting dari pengalaman pengguna situs web atau blog mana pun. Sering kali developer web/blog membiarkannya meluncur untuk mengakomodasi desain estetika yang lebih baik, fungsi baru yang bagus, atau untuk menambahkan lebih banyak konten ke laman web/blog. Sayangnya, pengunjung situs web cenderung lebih mementingkan kecepatan daripada semua fitur yang ingin kami tambahkan ke situs web anda. Selain itu, waktu pemuatan halaman menjadi faktor yang lebih penting dalam hal peringkat mesin pencari.

Kecepatan sebuah halaman blog memang sangat penting namun di era ioT (internet of thing) yang akan memasuki jaringan 5G saya rasa kecepatan transfer data sebuah halaman web/blog saat ini sudah terbilang cepat dan baik, tinggal optimasi dari penggunaan script yang baik supaya browser bisa lebih cepat dan mudah untuk proses rendering halaman blog anda.

Tak kalah pentingnya adalah bagaimana membuat tampilan blog anda bisa terlihat dinamis dan uptodate agar pengunjung bisa senantiasa terhibur ketika mengunjungi blog anda. Menggunakan loading screen yang baik merupakan salah satu solusi untuk menjaga pengunjung anda tetap sabar dan terhibur. Dengan sedikit animasi dari gambar GIF akan membuat pengunjung menjadi lebih terhibur sambil menunggu proses rendering halaman blog anda selesai dirender oleh browser pengguna.

Informasi Singkat

Layar pemuatan (loading screen) adalah gambar yang ditampilkan oleh program komputer, sering kali berupa permainan video, saat program sedang memuat atau menginisialisasi.

Dalam video game awal, layar pemuatan juga merupakan kesempatan bagi seniman grafis untuk menjadi kreatif tanpa batasan teknis yang sering diperlukan untuk grafis dalam game. Utilitas penarikan juga terbatas selama periode ini. Melbourne Draw, salah satu dari sedikit utilitas layar 8-bit dengan fungsi zoom, adalah salah satu program pilihan bagi seniman.

Saat memuat layar tetap menjadi hal yang biasa di gim video, pemuatan latar belakang sekarang digunakan di banyak gim, terutama judul dunia terbuka, untuk menghilangkan pemuatan layar saat melintasi gim secara normal, membuatnya hanya muncul saat menggunakan warps atau perjalanan cepat.

Sumber : Wikipedia

DAFTAR ISI

Cara Pemasangan Widget Pada Blogger

Pilihan Gambar Animasi GIF

Pilihan Loading Screen Spinner

Pilihan Loading Screen Premium

#1 Cara Pemasangan Widget Pada Blogger

PERINGATAN

Perhatian ! sebelum melakukan perubahan pada kode HTML template blog, sebaiknya Anda melakukan backup kode HTML template blog terlebih dahulu, dikarenakan untuk menghindari hal-hal yang tidak diinginkan. Apabila terjadi kesalahan prosedur dalam melakukan perubahan kode HTML template blog, maka Anda dapat melakukan proses perbaikan dengan cepat dan mudah.

Kode pemasang loading screen pada halaman web/blog secara default dibagi menjadi dua yaitu pemasangan kode di atas tag </Head> dan pemasangan kode pada bagian tag <Body>. Pada tag </Head> digunakan untuk menempatkan kode Javascript dan kode CSS sedangkan pada bagian tag <Body> digunakan untuk menaruh kode elemen HTML loading screen.

Tujuan pemasangan kode dibagi menjadi dua bagian, yaitu pada bagian tag </Head> dan tag <Body> adalah untuk mengoptimalkan inisialisasi proses rendering browser pertama kali pada saat data sudah diterima dari web server, sehingga akan mempercepat waktu loading dan proses randering halaman web atau blog.

Pemasangan loading screen untuk penggunaan tampilan background biru dan animasi GIF seperti yang terlihat pada contoh gambar di bawah ini.

loading... please wait !

Berikut contoh untuk cara pemasangan tampilan background biru dan animasi GIF.

Silakan login dahulu ke blog Anda.

Klik tombol Tema untuk masuk ke tema editor.

Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.

Geser scrollbar ke posisi paling bawah.

Letakan kode Javascript dan kode CSS di bawah ini tepat di atas tag </Head>.


<style>
body{overflow:hidden;height:100vh;}
#preloader{width:100%;height:100vh;position:fixed;left:0;right:0;top:0;bottom:0;margin:0;padding:0;background-color:#006490;z-index:+999999999;}
.cfl-loadnote{color:#fff;font-size:16px;display:block;padding:5px;margin:0;text-align:center;width:100%;position:absolute;top:calc(50% - 34px);}
</style>
<noscript><style>#preloader{display:none;z-index:-1;}body{overflow:auto;height:auto;}</style></noscript>
<script>
$(window).load(function(){$("#preloader").fadeOut(1000,function(){$('body').css({'overflow':'auto','height':'auto'});});});
$(window).on('beforeunload',function(){$('#preloader').fadeIn('slow');});
</script>


Kemudian letakan kode elemen HTML di bawah ini tepat di bawah tag <Body>.


<div id='preloader'><div class='cfl-loadnote'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4y6f3kU81rgRakZlw5ARZs3GkDsO9rlxWl0sbJySouaQvNroLw76vs9rzStVx_sbhEngeQ0U8EdMD953llQipoRzRvHS5gHUuwPI3nZhHshZqmo3cl3BxCaQmwBsfimyoIcAhOB1KJz4/s48/pikachu+running+pixel.gif'/><br/>loading... please wait !</div></div>


KETERANGAN
Pada Kode :
background-color:#006490;

Merupakan kode CSS untuk warna latar belakang yang digunakan, anda bisa mengganti atau merubah kode CSS tersebut untuk menyesuaikan dengan warna tema blog yang anda gunakan.

Pada Kode :
top:calc(50% - 34px);

Merupakan kode variabel CSS untuk menentukan elevasi tengah, cara menentukannya adalah dengan cara menghitung tinggi dimensi gambar animasi yang digunakan kemudian dibagi dua. Contoh pada angka (34px) didapat dari perhitungan :

Tinggi gambar : 50 pixel
Tinggi text : 18 pixel
-----------------------------(+)
Total Tinggi : 68 pixel
-----------------------------
Variabel tinggi : 68/2 = 34 pixel

Pada elemen HTML untuk URL gambar animasi GIF terletak pada tag <image>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkDi8WuIXRxvPwTiT0q6yopBPx0T0LoCs7UmSnisxOCdiBDQbRvRYl_OdvdRMJqffgxqsL-MAoqeYn7qQX1qG8gydi3ODoyT0H5mA7RON_tXkuH1JebZLxQGlWgyVp9nqcqjOiMIhR6ko/s600/edit_HTML_Blogger_05.jpg" style="width:100%;border:1px #ccc solid;border-radius:4px;"/>;

Jika anda ingin menggunakan gambar animasi GIF sendiri, silakan anda ganti URL gambar animasi GIF pada kode di atas dengan URL gambar animasi GIF yang ingin anda gunakan.

Penting ! pastikan ukuran file gambar animasi GIF berukuran kecil karena untuk mempercepat tampilan loading screen tanpa ada jeda (lag).

#2 Pilihan Gambar Animasi GIF

Beberapa pilihan gambar animasi GIF unik dan lucu yang dapat anda gunakan untuk gambar animasi loading screen. Cara menggunakannya, pertama-tama silakan anda download terlebih dahulu, kemudian taruh gambar yang sudah di download di web server anda atau google blogspot image, salin URL gambar dan taruh pada kode input variabel untuk gambar animasi.

#3 Pilihan Tampilan Loading Screen

Jika dirasa kurang cocok dengan tampilan loading screen pada kode diatas, anda bisa menggunakan beberapa alternatif pilihan tampilan animasi loading screen yang menggunakan kode CSS di bawah ini. Berikut beberapa alternatif tampilan loading screen yang berhasil admin rangkum dari hasil searching dan blogwalking.

1 Color Spinner

Kode di atas tag </Head>


<style>
/*-- Setting --*/
:root {
--loadBG: #333;
--loadBorder1: #0083da;
--loadColor: #fff;
}
/*-- CSS --*/
body{overflow:hidden;height:100vh;}#preloader{background-color:var(--loadBG);width:100%;height:100vh;position:fixed;left:0;right:0;top:0;bottom:0;margin:0;padding:0;z-index:+99999999999999999;}.loader{color:var(--loadColor);font-size:16px;display:block;padding:5px;margin:0;width:100%;position:absolute;top:calc(50% - 60px);left:calc(50% - 60px);}.loading{border:10px solid #ccc;border-radius:50%;border-top:10px solid var(--loadBorder1);width:60px;height:60px;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;}@-webkit-keyframes spin{0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);}}@keyframes spin{0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
</style>
<noscript><style>#preloader{display:none;z-index:-1;}body{overflow:auto;height:auto;}</style></noscript>
<script>
$(window).load(function(){$("#preloader").fadeOut(1000,function(){$('body').css({'overflow':'auto','height':'auto'});});});
$(window).on('beforeunload',function(){$('#preloader').fadeIn('slow');});
</script>


Kode di bawah tag <Body>


<div id='preloader'><div class='loader'><div class='loading'></div></div></div>

2 Color Spinner

Kode di atas tag </Head>


<style>
/*-- Setting --*/
:root {
--loadBG: #333;
--loadBorder1: blue;
--loadBorder2: red;
--loadColor: #fff;
}
/*-- CSS --*/
body{overflow:hidden;height:100vh;}#preloader{background-color:var(--loadBG);width:100%;height:100vh;position:fixed;left:0;right:0;top:0;bottom:0;margin:0;padding:0;z-index:+99999999999999999;}.loader{color:var(--loadColor);font-size:16px;display:block;padding:5px;margin:0;width:100%;position:absolute;top:calc(50% - 60px);left:calc(50% - 60px);}.loading{border:10px solid #ccc;border-radius:50%;border-top:10px solid var(--loadBorder1);border-bottom:10px solid var(--loadBorder2);width:60px;height:60px;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;}@-webkit-keyframes spin{0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);}}@keyframes spin{0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
</style>
<noscript><style>#preloader{display:none;z-index:-1;}body{overflow:auto;height:auto;}</style></noscript>
<script>
$(window).load(function(){$("#preloader").fadeOut(1000,function(){$('body').css({'overflow':'auto','height':'auto'});});});
$(window).on('beforeunload',function(){$('#preloader').fadeIn('slow');});
</script>


Kode di bawah tag <Body>


<div id='preloader'><div class='loader'><div class='loading'></div></div></div>

3 Color Spinner

Kode di atas tag </Head>


<style>
/*-- Setting --*/
:root {
--loadBG: #333;
--loadBorder1: blue;
--loadBorder2: red;
--loadBorder3: green;
--loadColor: #fff;
}
/*-- CSS --*/
body{overflow:hidden;height:100vh;}#preloader{background-color:var(--loadBG);width:100%;height:100vh;position:fixed;left:0;right:0;top:0;bottom:0;margin:0;padding:0;z-index:+99999999999999999;}.loader{color:var(--loadColor);font-size:16px;display:block;padding:5px;margin:0;width:100%;position:absolute;top:calc(50% - 60px);left:calc(50% - 60px);}.loading{border:10px solid #ccc;border-radius:50%;border-top:10px solid var(--loadBorder1);border-bottom:10px solid var(--loadBorder2);border-right:10px solid var(--loadBorder3);width:60px;height:60px;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;}@-webkit-keyframes spin{0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);}}@keyframes spin{0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
</style>
<noscript><style>#preloader{display:none;z-index:-1;}body{overflow:auto;height:auto;}</style></noscript>
<script>
$(window).load(function(){$("#preloader").fadeOut(1000,function(){$('body').css({'overflow':'auto','height':'auto'});});});
$(window).on('beforeunload',function(){$('#preloader').fadeIn('slow');});
</script>


Kode di bawah tag <Body>


<div id='preloader'><div class='loader'><div class='loading'></div></div></div>

4 Color Spinner

Kode di atas tag </Head>


<style>
/*-- Setting --*/
:root {
--loadBG: #333;
--loadBorder1: blue;
--loadBorder2: red;
--loadBorder3: green;
--loadBorder4: gold;
--loadColor: #fff;
}
/*-- CSS --*/
body{overflow:hidden;height:100vh;}#preloader{background-color:var(--loadBG);width:100%;height:100vh;position:fixed;left:0;right:0;top:0;bottom:0;margin:0;padding:0;z-index:+99999999999999999;}.loader{color:var(--loadColor);font-size:16px;display:block;padding:5px;margin:0;width:100%;position:absolute;top:calc(50% - 60px);left:calc(50% - 60px);}.loading{border:10px solid #ccc;border-radius:50%;border-top:10px solid var(--loadBorder1);border-bottom:10px solid var(--loadBorder2);border-right:10px solid var(--loadBorder3);border-left:10px solid var(--loadBorder4);width:60px;height:60px;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite;}@-webkit-keyframes spin{0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);}}@keyframes spin{0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
</style>
<noscript><style>#preloader{display:none;z-index:-1;}body{overflow:auto;height:auto;}</style></noscript>
<script>
$(window).load(function(){$("#preloader").fadeOut(1000,function(){$('body').css({'overflow':'auto','height':'auto'});});});
$(window).on('beforeunload',function(){$('#preloader').fadeIn('slow');});
</script>


Kode di bawah tag <Body>


<div id='preloader'><div class='loader'><div class='loading'></div></div></div>

#4 Pilihan Loading Screen Premium

Mau tampilan loading screen yang lebih gokil dan premium, silakan anda pilih dan gunakan tampilan loading screen di bawah ini, rasanya seperti menjadi iron man, anjim banget... Pastikan anda menggunakan loading screen dengan bijak dan seksama untuk mengoptimalkan antara kecepatan proses rendering dan keserasian dari penggunaan template yang digunakan.

Tampilan Loading Screen Premium hanya menggunakan kode CSS untuk membuat animasi yang atraktif sehingga proses untuk pembuatan dan pemasangannya pada blog pun cukup mudah, hampir sama dengan metode pemasangan pada kode di atas, yaitu terdiri dari dua bagian kode, pemasangan kode sebelum tag </Head> dan pemasangan kode setelah tag <Body>. Monggo buat yang tertarik silakan dipilih salah satu dari tampilan loading screen super premium di bawah ini.

3D Cube Loading Animation

Menggunakan animasi 3D full kode CSS dan Browser friendly sehingga bisa ditampilkan di semua perangkat tanpa ada kendala. Loading screen 3D Cube Loading Animation memiliki tampilan yang atraktif dan dinamis sehingga website atau blog anda akan lebih terlihat modern dan up-to-date.

Kode di atas tag </Head>


<style>
body{overflow:hidden;height:100vh;}
#preloader{
align-items: center;
background: #333;
display: flex;
justify-content: center;
min-height: 100vh;
overflow: hidden;
margin:0;
padding:0;
top:0;
left:0;
position:fixed;
width:100%;
z-index:+99999999999999999;
}
:root {
--movement: 0.85;
--stop: 0.5;
--duration: calc((var(--movement) * (1 / var(--stop))));
--stagger: 0.1125;
--perspective: 500;
--size: 50;
--ease: cubic-bezier(1, -0.52, 0.26, 0.89);
--bg: #e6e6e6;
--panel: #fff;
--color: #0d0d0d;
--hue: 23;
--saturation: 100;
--lightness: 55;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--panel: #000;
--color: #f2f2f2;
}
}
.scene {
perspective: calc(var(--perspective) * 1px);
}
.word {
display: flex;
transform: translate(calc(var(--size) * 0.7px), 0) rotateX(-30deg) rotateY(45deg);
transform-style: preserve-3d;
}
.letter__wrap {
-webkit-animation: jump calc(var(--duration) * 1s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) var(--ease) infinite;
animation: jump calc(var(--duration) * 1s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) var(--ease) infinite;
transform-origin: bottom center;
transform-style: preserve-3d;
}
.letter__wrap .letter {
-webkit-animation: rotate calc(var(--duration) * 4s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) ease infinite;
animation: rotate calc(var(--duration) * 4s) calc((var(--stagger, 0) * var(--index, 0)) * 1s) ease infinite;
}
.letter {
color: var(--color);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 2rem;
font-weight: bold;
height: calc(var(--size) * 1px);
margin-right: calc(var(--size) * 0.2px);
position: relative;
text-transform: uppercase;
transform-style: preserve-3d;
width: calc(var(--size) * 1px);
}
.letter__panel {
align-items: center;
background: var(--panel);
border: 5px hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%)) solid;
display: flex;
height: calc(var(--size) * 1px);
justify-content: center;
left: 50%;
position: absolute;
top: 50%;
width: calc(var(--size) * 1px);
box-sizing: border-box;
transition: all 0.15s ease 0s;
}
.letter__panel:nth-of-type(1) {
transform: translate3d(-50%, -50%, 0) translate3d(0, 0, calc(var(--size) * 0.5px));
}
.letter__panel:nth-of-type(2) {
transform: translate3d(-50%, -50%, 0) rotateX(90deg) translate3d(0, 0, calc(var(--size) * 0.5px));
}
.letter__panel:nth-of-type(3) {
transform: translate3d(-50%, -50%, 0) rotateX(180deg) translate3d(0, 0, calc(var(--size) * 0.5px));
}
.letter__panel:nth-of-type(4) {
transform: translate3d(-50%, -50%, 0) rotateX(-90deg) translate3d(0, 0, calc(var(--size) * 0.5px));
}
.letter__panel:nth-of-type(5) {
transform: translate3d(-50%, -50%, 0) rotateY(-90deg) translate3d(0, 0, calc(var(--size) * 0.5px));
}
@-webkit-keyframes rotate {
0%, 30.625% {
transform: rotateX(0deg);
}
33.125%, 81.625% {
transform: rotateX(90deg);
}
83.125%, 100% {
transform: rotateX(180deg);
}
}
@keyframes rotate {
0%, 30.625% {
transform: rotateX(0deg);
}
33.125%, 81.625% {
transform: rotateX(90deg);
}
83.125%, 100% {
transform: rotateX(180deg);
}
}
@-webkit-keyframes jump {
0%, 50%, 100% {
transform: scaleX(1) scaleY(1) translate(0, 0);
}
15% {
transform: scaleX(1.2) scaleY(0.8) translate(0, 0);
}
25% {
transform: scaleX(0.9) scaleY(1.1) translate(0, -100%);
}
}
@keyframes jump {
0%, 50%, 100% {
transform: scaleX(1) scaleY(1) translate(0, 0);
}
15% {
transform: scaleX(1.2) scaleY(0.8) translate(0, 0);
}
25% {
transform: scaleX(0.9) scaleY(1.1) translate(0, -100%);
}
}
</style>
<noscript><style>#preloader{display:none;z-index:-1;}body{overflow:auto;height:auto;}</style></noscript>
<script>
$(window).load(function(){$("#preloader").fadeOut(1000,function(){$('body').css({'overflow':'auto','height':'auto'});});});
$(window).on('beforeunload',function(){$('#preloader').fadeIn('slow');});
</script>


Kode di bawah tag <Body>


<div id="preloader">
<div class="scene" style="--hue: 260; --saturation: 87; --lightness: 73">
<div class="word">
<div class="letter__wrap" style="--index: 0">
<div class="letter" data-letter="L"><span class="letter__panel" aria-hidden="true">L</span><span class="letter__panel" aria-hidden="true">W</span><span class="letter__panel" aria-hidden="true">L</span><span class="letter__panel" aria-hidden="true">W</span><span class="letter__panel"></span></div>
</div>
<div class="letter__wrap" style="--index: 1">
<div class="letter" data-letter="o"><span class="letter__panel" aria-hidden="true">o</span><span class="letter__panel" aria-hidden="true">a</span><span class="letter__panel" aria-hidden="true">o</span><span class="letter__panel" aria-hidden="true">a</span><span class="letter__panel"></span></div>
</div>
<div class="letter__wrap" style="--index: 2">
<div class="letter" data-letter="a"><span class="letter__panel" aria-hidden="true">a</span><span class="letter__panel" aria-hidden="true">i</span><span class="letter__panel" aria-hidden="true">a</span><span class="letter__panel" aria-hidden="true">i</span><span class="letter__panel"></span></div>
</div>
<div class="letter__wrap" style="--index: 3">
<div class="letter" data-letter="d"><span class="letter__panel" aria-hidden="true">d</span><span class="letter__panel" aria-hidden="true">t</span><span class="letter__panel" aria-hidden="true">d</span><span class="letter__panel" aria-hidden="true">t</span><span class="letter__panel"></span></div>
</div>
<div class="letter__wrap" style="--index: 4">
<div class="letter" data-letter="i"><span class="letter__panel" aria-hidden="true">i</span><span class="letter__panel" aria-hidden="true">.</span><span class="letter__panel" aria-hidden="true">i</span><span class="letter__panel" aria-hidden="true">.</span><span class="letter__panel"></span></div>
</div>
<div class="letter__wrap" style="--index: 5">
<div class="letter" data-letter="n"><span class="letter__panel" aria-hidden="true">n</span><span class="letter__panel" aria-hidden="true">.</span><span class="letter__panel" aria-hidden="true">n</span><span class="letter__panel" aria-hidden="true">.</span><span class="letter__panel"></span></div>
</div>
<div class="letter__wrap" style="--index: 6">
<div class="letter" data-letter="g"><span class="letter__panel" aria-hidden="true">g</span><span class="letter__panel" aria-hidden="true">.</span><span class="letter__panel" aria-hidden="true">g</span><span class="letter__panel" aria-hidden="true">.</span><span class="letter__panel"></span></div>
</div>
</div>
</div>
</div>

Text Loading Animation

Menggunakan animasi teks loading dengan perpaduan penggunaan efek skala dan warna sehingga memberikan animasi yang unik pada tampilan halaman blog anda. Penggunaan kode CSS yang sederhana sehingga dapat dengan mudah di modifikasi untuk menyesuaikan dengan tampilan template blog yang anda gunakan.

l

o

a

d

i

n

g

Kode di atas tag </Head>


<style>
:root {
--effect: hover 1s linear infinite;
}
body{overflow:hidden;height:100vh;}
#preloader{
align-items: center;
background: #333;
display: flex;
justify-content: center;
min-height: 100vh;
overflow: hidden;
margin:0;
padding:0;
top:0;
left:0;
position:fixed;
width:100%;
z-index:+99999999999999999;
}

#preloader p {
display: inline-block;
text-transform: uppercase;
text-align: center;
font-size: 4em;
font-family: arial;
font-weight: 600;
transform: scale(.5);
color: #121212;
-webkit-text-stroke: 2px gray;
}

#preloader p:nth-child(1) {
animation: var(--effect);
}

#preloader p:nth-child(2) {
animation: var(--effect) .125s;
}

#preloader p:nth-child(3) {
animation: var(--effect) .25s;
}

#preloader p:nth-child(4) {
animation: var(--effect) .375s;
}

#preloader p:nth-child(5) {
animation: var(--effect) .5s;
}

#preloader p:nth-child(6) {
animation: var(--effect) .675s;
}

#preloader p:nth-child(7) {
animation: var(--effect) .75s;
}

@keyframes hover {
0% {
transform: scale(.5);
color: #121212;
-webkit-text-stroke: 2px gray;
}

20% {
transform: scale(1);
color: pink;
-webkit-text-stroke: 3px red;
filter: drop-shadow(0 0 1px black)drop-shadow(0 0 1px black)drop-shadow(0 0 3px red)drop-shadow(0 0 5px red)hue-rotate(10turn);
}

50% {
transform: scale(.5);
color: #121212;
-webkit-text-stroke: 2px gray;
}
}
</style>
<noscript><style>#preloader{display:none;z-index:-1;}body{overflow:auto;height:auto;}</style></noscript>
<script>
$(window).load(function(){$("#preloader").fadeOut(1000,function(){$('body').css({'overflow':'auto','height':'auto'});});});
$(window).on('beforeunload',function(){$('#preloader').fadeIn('slow');});
</script>


Kode di bawah tag <Body>


<div id="preloader">
<div>
<p>l</p>
<p>o</p>
<p>a</p>
<p>d</p>
<p>i</p>
<p>n</p>
<p>g</p>
</div>
</div>

Bar Loader Animation

Menggunakan animasi bar loading dengan perpaduan penggunaan efek skala dan warna sehingga memberikan animasi yang unik pada tampilan halaman blog anda. Penggunaan kode CSS yang sederhana sehingga dapat dengan mudah di modifikasi untuk menyesuaikan dengan tampilan template blog yang anda gunakan.

Kode di atas tag </Head>


<style>
body{overflow:hidden;height:100vh;}
#preloader{
align-items: center;
background: #333;
display: flex;
justify-content: center;
min-height: 100vh;
overflow: hidden;
margin:0;
padding:0;
top:0;
left:0;
position:fixed;
width:100%;
z-index:+99999999999999999;
}
.loader {
margin: 0 auto;
width: 60px;
height: 50px;
text-align: center;
font-size: 10px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}
.loader > div {
height: 100%;
width: 8px;
display: inline-block;
float: left;
margin-left: 2px;
-webkit-animation: delay 0.8s infinite ease-in-out;
animation: delay 0.8s infinite ease-in-out;
}
.loader .bar1 {
background-color: #754fa0;
}
.loader .bar2 {
background-color: #09b7bf;
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.loader .bar3 {
background-color: #90d36b;
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.loader .bar4 {
background-color: #f2d40d;
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.loader .bar5 {
background-color: #fcb12b;
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.loader .bar6 {
background-color: #ed1b72;
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}

@-webkit-keyframes delay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.05);
}
20% {
-webkit-transform: scaleY(1);
}
}
@keyframes delay {
0%, 40%, 100% {
transform: scaleY(0.05);
-webkit-transform: scaleY(0.05);
}
20% {
transform: scaleY(1);
-webkit-transform: scaleY(1);
}
}
</style>
<noscript><style>#preloader{display:none;z-index:-1;}body{overflow:auto;height:auto;}</style></noscript>
<script>
$(window).load(function(){$("#preloader").fadeOut(1000,function(){$('body').css({'overflow':'auto','height':'auto'});});});
$(window).on('beforeunload',function(){$('#preloader').fadeIn('slow');});
</script>


Kode di bawah tag <Body>


<div id="preloader">
<div class="loader">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
</div>
</div>

Illuminati Rainbow Animation

Menggunakan animasi segitiga dengan perpaduan penggunaan efek skala dan warna sehingga memberikan animasi yang unik pada tampilan loading blog anda. Penggunaan kode CSS yang sederhana sehingga dapat dengan mudah di modifikasi untuk menyesuaikan dengan tampilan template blog yang anda gunakan.

Loading

Kode di atas tag </Head>

<style>
@keyframes grow-and-fade {
0% {
opacity: 0;
transform: scale(0.1) translatez(0);
}
40% {
opacity: 1;
}
60% {
opacity: 1;
}
100% {
opacity: 0;
transform: scale(1) translatez(0);
}
}
@keyframes pulsing-fade {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
40% {
opacity: 0.8;
}
60% {
opacity: 0;
}
}
#preloader{
align-items: center;
background: #333;
display: flex;
justify-content: center;
min-height: 100vh;
overflow: hidden;
margin:0;
padding:0;
top:0;
left:0;
position:fixed;
width:100%;
z-index:+99999999999999999;
}
.triangle {
animation: grow-and-fade 2000ms linear infinite;
height: 150px;
left: 0;
opacity: 0;
width: 150px;
position: absolute;
top: 0%;
transform: translatez(0);
transform-origin: 50% 60%;
will-change: opacity, transform;
}
.triangle-wrapper {
height: 150px;
position: absolute;
width: 150px;
top: calc(50% - 75px);
left: calc(50% - 75px);
}
.triangle-loading {
animation: pulsing-fade 6000ms ease infinite;
color: white;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-size: 12px;
font-weight: 300;
left: 50%;
letter-spacing: 8px;
margin-left: 4px;
margin-top: 10px;
opacity: 0;
position: absolute;
top: 100%;
transform: translate3d(-50%, -50%, 0);
text-transform: uppercase;
width: 100%;
display: inline-block;
text-align: center;
}
.triangle-svg {
margin-top: -20px;
opacity: 0.5;
overflow: visible;
}
.triangle-polygon {
stroke-width: 5px;
}
.triangle-1 {
animation-delay: 0ms;
}
.triangle-1 .triangle-polygon {
stroke: hotpink;
}
.triangle-2 {
animation-delay: 400ms;
}
.triangle-2 .triangle-polygon {
stroke: aqua;
}
.triangle-3 {
animation-delay: 800ms;
}
.triangle-3 .triangle-polygon {
stroke: cornflowerblue;
}
.triangle-4 {
animation-delay: 1200ms;
}
.triangle-4 .triangle-polygon {
stroke: yellow;
}
.triangle-5 {
animation-delay: 1600ms;
}
.triangle-5 .triangle-polygon {
stroke: white;
}
</style>
<noscript><style>#preloader{display:none;z-index:-1;}body{overflow:auto;height:auto;}</style></noscript>

Kode di bawah tag <Body>

<div id="preloader">
<div class="triangle-wrapper">
<div class="triangle triangle-1"></div>
<div class="triangle triangle-2"></div>
<div class="triangle triangle-3"></div>
<div class="triangle triangle-4"></div>
<div class="triangle triangle-5"></div>
<p class="triangle-loading">Loading</p>
</div>
</div>

<script>
(() => {
const $triangles = document.querySelectorAll('.triangle');
const template = `<svg class="triangle-svg" viewBox="0 0 140 141">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon class="triangle-polygon" points="70 6 136 138 4 138"></polygon>
</g>
</svg>`;

Array.prototype.forEach.call($triangles, ($triangle, index) => {
$triangle.innerHTML = template;
});
})();
$(window).load(function(){$("#preloader").fadeOut(1000,function(){$('body').css({'overflow':'auto','height':'auto'});});});
$(window).on('beforeunload',function(){$('#preloader').fadeIn('slow');});
</script>

Flat Circle Animation

Menggunakan animasi lingkaran datar dengan perpaduan penggunaan efek warna cyberpunk sehingga memberikan animasi yang unik pada tampilan loading blog anda. Penggunaan kode CSS yang sederhana sehingga dapat dengan mudah di modifikasi untuk menyesuaikan dengan tampilan template blog yang anda gunakan.

Kode di atas tag </Head>

<style>
#preloader{
align-items: center;
background: #333;
display: flex;
justify-content: center;
min-height: 100vh;
overflow: hidden;
margin:0;
padding:0;
top:0;
left:0;
position:fixed;
width:100%;
z-index:+99999999999999999;
}

.spinner {
position: relative;
margin: auto;
box-sizing: border-box;
background-clip: padding-box;
width: 200px;
height: 200px;
border-radius: 100px;
border: 4px solid rgba(255, 255, 255, 0.1);
-webkit-mask: linear-gradient(rgba(0, 0, 0, 0.1), #000000 90%);
transform-origin: 50% 60%;
transform: perspective(200px) rotateX(66deg);
animation: spinner-wiggle 1.2s infinite;
}
.spinner:before,
.spinner:after {
content: "";
position: absolute;
margin: -4px;
box-sizing: inherit;
width: inherit;
height: inherit;
border-radius: inherit;
opacity: .05;
border: inherit;
border-color: transparent;
animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite;
}

.spinner:before {
border-top-color: #66e6ff;
}

.spinner:after {
border-top-color: #f0db75;
animation-delay: 0.3s;
}

@keyframes spinner-spin {
100% {
transform: rotate(360deg);
}
}
@keyframes spinner-fade {
20% {
opacity: .1;
}
40% {
opacity: 1;
}
60% {
opacity: .1;
}
}
</style>
<noscript><style>#preloader{display:none;z-index:-1;}body{overflow:auto;height:auto;}</style></noscript>

Kode di bawah tag <Body>

<div id="preloader">
<div class="spinner"></div>
</div>

<script>
$(window).load(function(){$("#preloader").fadeOut(1000,function(){$('body').css({'overflow':'auto','height':'auto'});});});
$(window).on('beforeunload',function(){$('#preloader').fadeIn('slow');});
</script>

Demikian artikel blog tentang Cara Memasang Loading Screen Pada Halaman Blog terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.

Keyword

blog, blogger, blogspot, loading, screen, page, website, animasi, GIF, sexy, girl, pikachu, blue, gradien, color, cara, pasang, buat, kode, script, javascript, jquery, css, html, code, animated, logon, login, preloader, loader, load, first

Incoming Search Term

Cara membuat loading screen untuk blogspot, kode script loading screen untuk halaman blog, loading screen for website, loading screen animation GIF for blogger, how to make loading screen for blogspot, kode html animasi loading blog, download loading screen gratis, cara bikin animasi GIF loading screen menggunakan jquery, bikin sendiri halaman loading blogger, kode sederhana bikin animasi loading blog, loading blogspot menggunakan css html javascript, tampilan loading unik, loading super premium paling kece, kumpulan loading screen paling baru, loading screen seru buat dipasang pada halaman blog

Main Settings

Header Ads

Cara Memasang Loading Screen Pada Halaman Blog

No comments

Post Top Ad

Author Details

Post Bottom Ad

Top Users

Comments

Top Pages

Formulir Kontak

Subscribe

Popular

Category