Yükleniyor… Vanilla JavaScript'te Animasyon

Giriş

Web siteleri ve web uygulamaları geliştirirken, bir yükleme animasyonu da dahil olmak üzere, neler olup bittiğini ileterek kullanıcı deneyimini önemli ölçüde geliştirebilirsiniz. Bu, içeriği yüklerken kullanıcıların ilgisini çeker ve dikkatlerini canlı tutar ve kullanıcıların tahmin yürütmesine izin vermek yerine neler olup bittiğini anlamalarına yardımcı olur.

Bu kılavuzda, yükleme animasyonu oluşturmak için Vanilla JavaScript'in nasıl kullanılacağına bakacağız. Her iki animasyonla da çalışacağız GIFler ve CSS tarafından oluşturulan yükleyiciler ve bunların iki senaryoda nasıl kullanılacağını görün: uygulama/web sitesi açılışında içerik yükleme veya harici bir API'den içerik isteme.

Yükleyici Nasıl Oluşturulur

İnsanların yükleyicilerini görüntülemek isteyebilecekleri çeşitli yollar vardır. Bu kılavuzun amacı doğrultusunda, tüm ekranı kaplayacak ve sayfanın yüklenmesi tamamlandığında kaybolacak bir yükleyici oluşturacağız. Öncelikle yer tutucu bir HTML sayfası oluşturmamız gerekiyor:

<div class="loader-container"> <div class="spinner"></div>
</div> <div class="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with Vanilla JavaScript. </p> <div class="buttons"> <button class="btn"><a href="#">Read Article</a></button> <button class="btn get-quote">Generate Quote</button> </div> <div class="quote-section"> <blockquote class="quote"> If you do not express your own original ideas, if you do not listen to your own being, you will have betrayed yourself. </blockquote> <span class="author">- Rollo May</span> </div>
</div>

Basitlik adına sadece iki tane var <div> bloklar – biri yükleyici için, diğeri web sitesinin içeriği için.

Daha önce belirtildiği gibi yükleme simgesi bir GIF, CSS ile oluşturulmuş animasyonlu bir simge veya başka bir şey. Unutulmaması gereken önemli nokta, aynı yaklaşımın kullandığımız her türlü yükleme simgesi için de geçerli olmasıdır.

GIF Kullanarak Yükleyici Oluşturma

A GIF süresiz olarak oynatılan animasyonlu bir simgedir. Bir kere biz kendimizi yarattık GIF, stilini oluşturacağız loader-container onu barındıracak div. Onu şekillendirmenin birçok yolu var! Burada gerçekten yaratıcı olabilirsiniz. Yükleme içeriğini "engellemek" için sayfamızın üstüne simgenin yanına siyah arka planı olan bir katman ekleyeceğiz:

.loader-container { width: 100%; height: 100vh; position: fixed; background: #000 url("https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif") center no-repeat; z-index: 1;
}

Şimdi web sayfamızı yüklediğimizde siyah bir arka plan göreceğiz. GIF ekranın ortasına yükleniyor, buna benzer:

Bu noktada JavaScript kullanarak yüklemeyi uygulamaya hazırız. Ama aynı zamanda CSS ile oluşturulan animasyonu nasıl kullanabileceğimizi de görelim. GIF, içe aktarmak için ek bir dosya gerektirmez.

CSS Kullanarak Yükleyici Oluşturma

CSS ile tamamen aynı simgeyi oluşturacağız. Unutmayın, fazladan bir div oluşturduk (spinner) içinde loader-container div'i kullanıyorum ve simgeyi temsil etmek için kullanacağımız şey bu:

.spinner { width: 64px; height: 64px; border: 8px solid; border-color: #3d5af1 transparent #3d5af1 transparent; border-radius: 50%; animation: spin-anim 1.2s linear infinite;
} @keyframes spin-anim { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}

Yukarıdaki kod, daha önce yaptığımız gibi siyah arka planı ortalamak ve eklemek için artık yükleyici-konteyner div'ini kullanabileceğimiz bir CSS yükleyici simgesi oluşturmamıza yardımcı olacaktır:

.loader-container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; position: fixed; background: #000; z-index: 1;
}

Artık iki tür animasyonlu yükleyiciyi gördüğümüze göre, bu yükleme animasyonunun ne zaman görünüp kaybolacağını kontrol etmek için JavaScript'i kullanalım.

JavaScript ile Yükleme Animasyonu Nasıl Uygulanır?

JavaScript, HTML yapımızı değiştirmemize ve loader-container şu anda görüntülenen önünde web sitesinin içeriği. Bunu başarmak için iki ana yaklaşım var; loader-containerveya tamamen kaldırmak.

Hangi yaklaşımı seçerseniz seçin, ilk adım şu yöntemi kullanmaktır: querySelector() or getElementById() almak için loader-container böylece onu manipüle edebiliriz:

const loaderContainer = document.querySelector('.loader-container');

İkinci olarak, kullanacağımız eventListener bir süre dinlemek load olay gerçekleştiğinde geri çağırma işlevini çağıracak şekilde load olay meydana gelir:

window.addEventListener('load', () => { // ...
});

Yükleniyor… Öğesini Gizleme

En yaygın yaklaşım gizlemek loader-container ile display: none böylece içerik tamamen yüklendiğinde kaybolur.

HTML DOM, HTML öğelerimizin stilini JavaScript'ten değiştirmemize olanak tanır ve aşağıdaki kod, yükleyicinin kapsayıcısını ayarladığımızı gösterir. display mülk none bir kez görünmemesi için load başarılı:

window.addEventListener('load', () => { loaderContainer.style.display = 'none';
});

Alternatif olarak, ayrı bir sınıf oluşturabilirsiniz. display: none özelliği:

.loader-container-hidden { display: none;
}

Ve sonra kullanmak classList.add() sınıfı eklemek için loader-container eleman:

window.addEventListener('load', () => { loaderContainer.classList.add('loader-container-hidden');
});

Yükleniyor… Öğesinin Kaldırılması

Şu ana kadar, sırlarımızı saklamamıza imkan veren önemli bir yöntem gördük. loader-container, öğenin hala mevcut olduğunu ancak gizli olduğunu ima eder. Başka bir seçenek de öğeyi tamamen kaldırmaktır:

window.addEventListener('load', () => { loaderContainer.parentElement.removeChild(loaderContainer);
});

Bu noktada sayfamızı yüklediğimizde sayfa içeriği tamamen yüklenene kadar yükleme animasyonu görüntülenecektir.

Bir API'den Harici İçerik Talep Ederken Animasyon Yüklemeyi Uygulama

İçeriğin harici bir API'den getirilmesi, bir yükleyicinin eklenmesini gerektirebilecek başka bir durumdur. Bu tür içeriğin getirilmesi ve görüntülenmesi biraz zaman alabilir, bu nedenle bir yükleyici eklemek en iyisidir.

Bizim durumumuzda, birinden teklif almayı deneyelim. tırnak işaretleri API'si yerleşik Fetch API'sini kullanarak. Bu makalenin başında oluşturduğumuz HTML'nin bir “Teklif Oluştur” düğme. Tek yapmamız gereken kullanmak document.querxySelector() öğeyi alma ve işlemek için bir geri çağırma işlevi oluşturma yöntemi click Kullanıcı düğmeye tıkladığında tetiklenen olay:

const getQuoteBtn = document.querySelector('.get-quote'); getQuoteBtn.addEventListener('click', () => { fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

Bu, uygulamamıza rastgele teklifler almamıza başarılı bir şekilde yardımcı olacaktır, ancak bir teklif almak istiyoruz. animasyon yükleniyor böylece kullanıcı içerik beklediğimizi bilir. Bunu başarmak için iki yöntem oluşturacağız; biri loader-container ve diğeri onu gizlemek için:

const displayLoading = () => { loaderContainer.style.display = 'block';
}; const hideLoading = () => { loaderContainer.style.display = 'none';
};

Bu noktada nihayet yükleme animasyonunu geri arama fonksiyonuna dahil edebiliriz. Getirme başladığında geri arama işlevi yükleme animasyonunu gösterecek ve veri alındığında onu gizleyecektir:

getQuoteBtn.addEventListener('click', () => { displayLoading(); fetch('https://api.quotable.io/random') .then((response) => { return response.json(); }) .then((data) => { hideLoading(); const quote = document.querySelector('.quote'); const author = document.querySelector('.author'); quote.innerHTML = data.content; author.innerHTML = data.author; });
});

Sonuç

Bu makalede, bir yükleme animasyonu oluşturmak ve onu uygun şekilde görüntülemek için vanilya JavaScript'in nasıl kullanılacağını öğrendik. Bunu başarmak için çeşitli yaklaşımları değerlendirdik ve yükleme animasyonu için birkaç farklı kullanım durumuna göz attık. Dönen daireyi yükleyici olarak kullanmayı tercih ettik, ancak siz onu istediğiniz şekilde değiştirebilirsiniz; kendinizinkini oluşturmaktan çekinmeyin GIF veya CSS animasyonlu yükleyici.

• Akıllı para. Avrupa'nın En İyi Bitcoin ve Kripto Borsası.
• Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. SERBEST ERİŞİM.
• KriptoHawk. Altcoin Radarı. Ücretsiz deneme.
• Kaynak: https://stackabuse.com/loading-animation-in-vanilla-javascript/