Loader Sayfası Görüntüsü
Amacı: Site yüklenirken görüntü bozukluğunu kullanıcıya yansıtmamak için kullanılır.
Kod Parçaları:
1. Sitenin _Layout.cshtml sayfasındaki <head></head> bölümünün içine aşağıdaki css ve script kodlarını yazıyoruz.
<style>
.loader.yuklendi {
display: none;
}
.loader {
background: #000000;
width: 100%;
height: 100vh;
display: table;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
text-align: center;
}
.loader .loader_content img {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
@@media(max-width:767px) {
.loader .loader_content img {
width: 50%;
}
}
@@media (max-width: 1199px) {
.loader .loader_content img {
width: 50%;
}
}
@@media(min-width:1200px) {
.loader .loader_content img {
width: 20%;
}
}
body {
overflow: hidden;
height: 100vh;
}
body.yuklendi {
height: auto;
overflow: visible;
}
</style>
<script>
function yuklendi() {
var d = document.getElementById("yukle");
d.className += " yuklendi";
var b = document.getElementById("body");
b.className += " yuklendi";
}
window.onload = yuklendi;
</script>
2. <body></body> bölümünün en başına aşağıdaki kodları yazıyoruz.
<div id="yukle" class="loader">
<div class="loader_content">
<img src="/Resim/Upload/logo-invert.png" />
</div>
</div>
© 2025, ASP.NET MVC CMS (Content Management System / İçerik Yönetim Sistemi). Tüm Hakları Saklıdır.
