hasil pencarian Script Loading Blog
kode Script membuat Loading Blog terbaru!
Salin dan tempel kode Script Loading Blog ini di blog kamu,lihat kode script di bawah..
"Script loading blog" merujuk pada bagaimana script (kode, seperti JavaScript) dieksekusi saat memuat halaman blog, dan dampaknya pada kecepatan situs. Penggunaan script yang tidak efisien dapat memperlambat loading, tetapi teknik seperti
lazy load atau menempatkan script di akhir halaman dapat mempercepatnya. Dampak script loading blog
- Memperlambat loading: Terlalu banyak script atau script yang berat dapat membuat waktu muat situs menjadi lebih lama karena browser harus mengunduh dan memproses semua kode.
- Memblokir rendering: Jika script diletakkan di bagian atas halaman, script tersebut dapat memblokir elemen lain di halaman untuk dimuat sampai script selesai dieksekusi.
Cara optimasi script loading blog
- Optimasi gambar dengan Lazy Load: Teknik ini menunda pemuatan gambar yang berada di luar area pandang pengguna. Gambar hanya dimuat saat pengunjung menggulir halaman ke arahnya, sehingga mempercepat loading awal.
- Tempatkan script di akhir halaman: Pindahkan script ke bagian bawah halaman, tepat sebelum tag penutup
</body>, agar browser dapat memuat elemen-elemen visual terlebih dahulu. - Minifikasi script: Hapus karakter yang tidak perlu, seperti spasi, komentar, dan baris baru, dari file CSS dan JavaScript Anda untuk mengurangi ukurannya dan mempercepat proses loading.
- Hapus script yang tidak perlu: Jika Anda menggunakan banyak plugin, hapus plugin atau script yang tidak Anda gunakan. Setiap plugin atau script menambah beban pada situs Anda.
klik untuk menyalin
👇
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website dengan Loader Keren</title>
<style>
/* Loader container */
#site-loader {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0f172a, #1e293b, #020617);
color: white;
overflow: hidden;
transition: opacity 600ms ease, visibility 600ms;
}
#site-loader::before {
content: "";
position: absolute;
inset: -40%;
background: radial-gradient(circle at 10% 20%, rgba(99,102,241,0.12), transparent 8%),
radial-gradient(circle at 80% 80%, rgba(16,185,129,0.08), transparent 10%);
animation: floatGradient 10s linear infinite;
mix-blend-mode: overlay;
}
@keyframes floatGradient {
0% { transform: translateY(-4%) rotate(0deg); }
50% { transform: translateY(4%) rotate(180deg); }
100% { transform: translateY(-4%) rotate(360deg); }
}
.loader-box {
position: relative;
z-index: 2;
width: min(420px, 88%);
padding: 24px;
border-radius: 16px;
background: rgba(255,255,255,0.05);
box-shadow: 0 10px 40px rgba(2,6,23,0.6);
text-align: center;
}
.loader-logo {
width: 80px;
height: 80px;
border-radius: 50%;
background: conic-gradient(from 120deg, #60a5fa, #7c3aed, #34d399, #f97316, #60a5fa);
display: grid;
place-items: center;
animation: logoSpin 2s linear infinite;
margin: 0 auto 12px;
}
@keyframes logoSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader-logo span {
font-weight: bold;
color: white;
}
.loader-title { font-size: 18px; font-weight: 600; margin-top: 6px; }
.loader-sub { font-size: 13px; opacity: 0.8; }
.progress-wrap {
width: 100%;
height: 10px;
background: rgba(255,255,255,0.1);
border-radius: 999px;
overflow: hidden;
margin-top: 14px;
}
.progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #60a5fa, #7c3aed, #34d399);
border-radius: 999px;
transition: width 300ms linear;
}
.progress-meta { margin-top: 6px; font-size: 13px; }
#site-loader.loaded {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
</style>
</head>
<body>
<!-- LOADER -->
<div id="site-loader">
<div class="loader-box">
<div class="loader-logo"><span>DC</span></div>
<div class="loader-title">DROP COIN</div>
<div class="loader-sub">Sedang memuat...</div>
<div class="progress-wrap"><div class="progress-fill" id="progress-fill"></div></div>
<div class="progress-meta" id="progress-text">0%</div>
</div>
</div>
<!-- KONTEN WEBSITE -->
<div style="padding:40px; text-align:center;">
<h1>Selamat datang di Website!</h1>
<p>Konten utama muncul setelah loader selesai.</p>
</div>
<script>
(function () {
const loader = document.getElementById('site-loader');
const fill = document.getElementById('progress-fill');
const text = document.getElementById('progress-text');
let current = 0;
function setProgress(p) {
p = Math.min(100, Math.round(p));
current = p;
fill.style.width = p + '%';
text.textContent = p + '%';
}
// Simulasi progress
const interval = setInterval(() => {
if (current < 95) {
setProgress(current + Math.random() * 5);
}
}, 200);
// Saat halaman benar2 loaded
window.addEventListener('load', () => {
clearInterval(interval);
setProgress(100);
setTimeout(() => loader.classList.add('loaded'), 600);
});
})();
</script>
</body>
</html>
Komentar untuk Script Loading Blog
Posting Komentar