Acil php anlayan biri
7
●256
- 22-11-2024, 10:59:42hocam sorun yok sadece mesela siteye girerken loading sayfası lazım sadece bir resim gözükecek sonra kayacak gidecek
odozkara adlı üyeden alıntı: mesajı görüntüle - 22-11-2024, 11:08:56<style>
/* Sayfa stili */
body {
margin: 0;
font-family: Arial, sans-serif;
overflow: hidden; /* Sayfa kaydırma önlensin */
}
/* Loading ekranı stili */
.loading-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* Koyu arka plan */
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
}
/* Görsel stili */
.loading-container img {
max-width: 80%;
max-height: 50%;
margin-bottom: 20px;
}
/* Loading metni stili */
.loading-text {
position: absolute;
bottom: 20px;
font-size: 18px;
animation: fadein 1.5s infinite;
}
/* Yanıp sönme animasyonu */
@keyframes fadein {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
</style>
<!-- Loading ekranı -->
<div class="loading-container" id="loadingScreen">
<img src="https://via.placeholder.com/600x400" alt="Loading Image">
<div class="loading-text">Loading...</div>
</div>
<script>
// Sayfa tamamen yüklendiğinde çalışır
window.addEventListener("load", () => {
const loadingScreen = document.getElementById("loadingScreen");
const mainContent = document.getElementById("mainContent");
// 3 saniye sonra loading ekranını kaldır ve ana içeriği göster
setTimeout(() => {
loadingScreen.style.display = "none"; // Loading ekranını gizle
mainContent.style.display = "block"; // Ana içeriği göster
document.body.style.overflow = "auto"; // Sayfa kaydırma etkinleştir
}, 3000); // 3000 milisaniye = 3 saniye
});
</script>