.NET ile Web Sitesi Yüklenirken Loader Nasıl Oluşturulur? -

Web sitelerinin hızlı yüklenmesi, kullanıcı deneyimi açısından son derece önemlidir. Bir sayfanın yüklenme süresi uzun olduğunda, kullanıcılar genellikle siteyi terk eder ve alternatiflere yönelir. Bu nedenle, web sitelerini yüklenirken kullanıcıya ilerleme göstergesi veya yüklenme animasyonu sunmak önemlidir. Bu yazıda, .NET tabanlı bir web sitesi yüklenirken kullanılabilecek bir loader yapısını inceleyeceğiz.

Adım 1: HTML Şablonunu Oluşturma İlk adımda, loader’ı içerecek olan HTML şablonunu oluşturmalısınız. Bunun için, genellikle bir div elemanı kullanılır. Bu elemana, loader’ı temsil eden CSS sınıflarını atayabilirsiniz. Örneğin:

<div id="loader" class="loader-container">
  <div class="loader"></div>
</div>

</div>

Adım 2: CSS Stillerini Tanımlama İkinci adımda, loader’ı stilize etmek için CSS kodlarını tanımlamalısınız. Loader’ı merkezlemek, dönen animasyonu eklemek gibi işlemler bu adımda gerçekleştirilir. Örneğin:

.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader-container {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

.loader {

border: 8px solid #f3f3f3;

border-top: 8px solid #3498db;

border-radius: 50%;

width: 60px;

height: 60px;

animation: spin 2s linear infinite;

}

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

Adım 3: .NET Web Sayfasına Loader Eklenmesi Son adımda, .NET web sayfanıza loader’ı eklemelisiniz. Bu adımda, .NET MVC veya Razor Pages gibi bir yapı kullanıyorsanız, loader’ı sayfa yüklendiğinde ve tamamlandığında göstermek veya gizlemek için uygun bir yöntem kullanabilirsiniz. Örneğin:

// Controller
public IActionResult Index()
{
    // Sayfa yüklenirken loader'ı göstermek için bir kod
    return View();
}

// Razor Pages
public async Task<IActionResult> OnGetAsync()
{
    // Sayfa yüklenirken loader'ı göstermek için bir kod
    return Page();
}

// Controller

public IActionResult Index()

{

// Sayfa yüklenirken loader'ı göstermek için bir kod

return View();

}

// Razor Pages

public async Task<IActionResult> OnGetAsync()

{

// Sayfa yüklenirken loader'ı göstermek için bir kod

return Page();

}

JavaScript veya jQuery gibi bir istemci tarafı teknoloji kullanıyorsanız, sayfa yüklenme olaylarına bir event listener ekleyerek loader’ı kontrol edebilirsiniz. Örneğin:

// Sayfa yüklendiğinde loader'ı gizle
window.addEventListener('load', function() {
  var loader = document.getElementById('loader');
  loader.style.display = 'none';
});

// Sayfa yüklenirken loader'ı göster
$(document).ajaxStart(function() {
  var loader = document.getElementById('loader');
  loader.style.display = 'block';
});

// Sayfa yükleme tamamlandığında loader'ı gizle
$(document).ajaxStop(function() {
  var loader = document.getElementById('loader');
  loader.style.display = 'none';
});