JavaScript ile jQuery Kullanarak Bir Dönme Etkinlik Göstericisi Oluşturma

Kullanıcılar web uygulamalarıyla etkileşime girdiğinde, genellikle anlık geri bildirim beklerler. Bir görev işlenirken zaman alıyorsa, kullanıcıların uygulamanın hala çalıştığını anlamasını sağlamak önemlidir. İşte burada dönme etkinlik göstericisi devreye girer; uzun süren bir görevin devam ettiğini gösteren basit ama etkili bir yöntemdir.

Etkinlik Göstericisi İhtiyacı

Bir web uygulaması kullandığınızı ve bir form gönderdiğinizi veya bazı veriler talep ettiğinizi hayal edin. Sistem isteğinizi işlerken birkaç saniye sürebilir. Kullanıcılar, uygulamanın çöktüğünden ya da ilerleme kaydedilmediğinden endişe edebilir. Dönme çemberi gibi görsel bir ipucu, bu endişeleri hafifletebilir.

Dönme Etkinlik Göstericisi Nedir?

Dönme etkinlik göstericisi genellikle Ajax etkinlik göstericisi olarak adlandırılır. Bu, esasen arka planda bir işlemi veya bir Ajax çağrısını gösterdiği anlamına gelir. Kullanıcılar, bunları birçok uygulamada karşılaşmış olabilirler, örneğin:

• Firefox gibi web tarayıcılarında yeni sekmelerin yüklenmesi
• macOS gibi işletim sistemlerinde önyükleme ekranları
• Verileri bekleyen çeşitli web uygulamaları

Dönme Etkinlik Göstericisi Nasıl Oluşturulur

1. Adım: Spinner Görselinizi Bulun

Dönme göstericisini uygulamanın ilk adımı, gerçek görüntüyü elde etmektir. “Ajax activity indicator” şeklinde basit bir Google araması yaparak birçok animasyonlu GIF stilinde dönen görüntü bulabilirsiniz.

Spinner görselleri için harika bir kaynak AjaxLoaddır. Burada, tercih ettiğiniz spinner tasarımını özelleştirebilir ve indirebilirsiniz.

2. Adım: HTML Yapınızı Hazırlayın

Spinner görselinizi, göstermek istediğiniz HTML içinde ekleyin. Örneğin, bir tablo içinde bir <div> elementi içinde veya sadece bağımsız bir bileşen olarak yerleştirebilirsiniz:

<div id="spinner" style="display: none;">
    <img src="path_to_your_spinner_image.gif" alt="Yükleniyor..." />
</div>

3. Adım: Görünürlüğü Değiştirmek için jQuery’yi Kullanın

HTML yapınızı oluşturduğunuza göre, bir görev başlatıldığında veya tamamlandığında spinner’ı göstermek veya gizlemek için jQuery kullanabilirsiniz. Bunu yapmanın basit bir yolu şöyle:

$(document).ready(function() {
    $("#yourButton").click(function() {
        $("#spinner").show(); // Butona tıklandığında spinner'ı göster
        
        // setTimeout ile uzun süren bir görevi simüle etme
        setTimeout(function() {
            $("#spinner").hide(); // Görev tamamlandıktan sonra spinner'ı gizle
        }, 3000); // Gerekirse süreyi ayarlayın
    });
});

Kod Açıklaması:

• Spinner’ı Göster: Belirli bir eylem tetiklendiğinde (bir butona tıklamak gibi), spinner’ın görünürlüğü gösterme şeklinde değiştirilir.
• Görevi Simüle Et: Gösterim amaçlı olarak, setTimeout fonksiyonu uzun süren bir görevi simüle eder. Uygulamada, burada Ajax çağrınız yapılacaktır.
• Spinner’ı Gizle: Görev tamamlandığında, spinner tekrar gizlenir.

Sonuç Olarak

Web uygulamanızda bir dönme etkinlik göstericisi uygulamak, yalnızca kullanıcı deneyimini geliştirmekle kalmaz, aynı zamanda sürece güven aşılar. Belirtilen adımları takip ederek, kullanıcılarınızın görevlerin devam etmekte olduğuna dair bilgili ve güvenli hissetmelerini sağlarken ilgi çekici bir görsel ipucu oluşturabilirsiniz.

Farklı spinner tasarımları ile denemeler yapmaktan çekinmeyin ve bunları web projelerinize entegre edin. İyi kodlamalar!