Setelan Tampilan Loading Blog Pada Kodeksidipo

Setelan Tampilan Loading Blog pada Kodeksidipo, Saya buat sedemikian rupa sehingga yang terlihat lebih dahulu adalah logo blog sebelum konten.

Saya melakukannya dengan cara menambah class='loading' pada tag <body>.

Kemudian mencantunkan tag HTML dan Javascript serta CSS berikut:

Tag HTML Loading Blog

<div id='loading-screen'>
<img alt='Logo Kodeksidipo' class='loading-logo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWhjHtVBJTANAclKcscpWNjmQtaav2XspBalTLa_0s8uc1AXW7vBUFUro3Z1OTg2CNZ4JYoPmRn_fwzMwppdypLqSwoUe8LuMzSXLroYOQ4LbyGlgN_7BigW8ZdZDKlPhf95F0N-zc3eP_FTiLT4sy9v8KVlSOsk0TzPE_01v8bSAo_Arlm_bWe7hjZMU9/s1600-rw/Kodeksidipo-Logo150x150.png'/>
</div>

Javascript Loading Blog

<script type='text/javascript'>
window.addEventListener(&#39;load&#39;, function() {
// Menghapus kelas &#39;loading&#39; untuk memicu efek fade-out dari CSS
document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
});
</script>

CSS Loading Blog

/* Loading Blog */
/* Tampilan penuh untuk layar loading */
#loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
/* Tambahkan efek transisi di bawah ini */
opacity: 1;
visibility: visible;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
/* Efek memudar halus saat kelas 'loading' dihapus */
body:not(.loading) #loading-screen {
opacity: 0;
visibility: hidden;
}
/* Ukuran logo */
.loading-logo {
width: 150px;
}

Beranda
Sebelumnya	‹- Postingan -›	Selanjutnya