読み込んでいます…バニラJavaScriptのアニメーション

概要

WebサイトやWebアプリケーションを開発する場合、アニメーションの読み込みを含めて、何が起こっているかを伝えることでユーザーエクスペリエンスを大幅に向上させることができます。 これにより、ユーザーはコンテンツを読み込んでいる間も注意を引き付け、注意を引き付けることができます。また、ユーザーが推測するのではなく、何が起こっているのかを理解するのに役立ちます。

このガイドでは、VanillaJavaScriptを使用して読み込みアニメーションを作成する方法を見ていきます。 両方のアニメーションを使用します GIFファイル CSSで作成されたローダーとXNUMXつのシナリオでそれらを使用する方法を確認します。アプリ/ウェブサイトの起動時にコンテンツを読み込むか、外部APIからコンテンツをリクエストします。

ローダーを作成する方法

ローダーを表示する方法はさまざまです。 このガイドの目的のために、画面全体をカバーし、ページの読み込みが完了すると消えるローダーを作成します。 まず、プレースホルダーHTMLページを作成する必要があります。

<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>

簡単にするために、XNUMXつしかありません <div> ブロック– XNUMXつはローダー用、もうXNUMXつはWebサイトのコンテンツ用です。

前に述べたように、読み込みアイコンは GIF、CSSなどで作成されたアニメーションアイコン。 覚えておくべき重要なことは、同じアプローチが、使用するすべてのタイプの読み込みアイコンに適用されるということです。

GIFを使用してローダーを作成する

A GIF は無期限に再生されるアニメーションアイコンです。 一度 私たちは私たちを作成しました GIF、スタイルを設定します loader-container それを収容するdiv。 それをスタイリングする方法はたくさんあります！ あなたはここで本当に創造的になることができます。 ページの上部にアイコンの横に黒い背景のレイヤーを追加するだけで、読み込み中のコンテンツを「ブロック」できます。

.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;
}

ここでWebページをロードすると、背景が黒で、 GIF 次のように、画面の中央にロードします。

この時点で、JavaScriptを使用して読み込みを実装する準備が整いました。 しかし、CSSで作成されたアニメーションの代わりにCSSで作成されたアニメーションを使用する方法も見てみましょう。 GIF、インポートするために追加のファイルを必要としません。

CSSを使用してローダーを作成する

CSSを使用してまったく同じアイコンを作成します。 追加のdivを作成したことを忘れないでください（spinner）内部 loader-container divとそれは、アイコンを表すために使用するものです。

.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); }
}

上記のコードは、CSSローダーアイコンを作成するのに役立ちます。このアイコンのローダーコンテナdivを使用して、以前と同じように黒い背景を中央に配置して追加できます。

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

XNUMX種類のアニメーションローダーが利用できることを確認したので、JavaScriptを使用して、この読み込みアニメーションが表示されるタイミングと非表示になるタイミングを制御してみましょう。

JavaScriptを使用してアニメーションの読み込みを実装する方法

JavaScriptを使用すると、HTML構造を操作して、 loader-container 現在表示されている の前に ウェブサイトのコンテンツ。 これを達成するためのXNUMXつの主要なアプローチがあります-ただ隠す loader-container、または完全に削除します。

どちらのアプローチを選択する場合でも、最初のステップは querySelector() or getElementById() 取得する loader-container それを操作できるように：

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

次に、 eventListener 聞くために load イベント。これにより、次の場合にコールバック関数が呼び出されます。 load イベントが発生します：

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

読み込みを非表示にする…要素

最も一般的なアプローチは、 loader-container 　 display: none コンテンツが完全に読み込まれると消えるようにします。

HTML DOMを使用すると、JavaScriptからHTML要素のスタイルを変更できます。以下のコードは、ローダーのコンテナーを設定していることを示しています。 display プロパティへ none 一度は表示されないように load 成功しました：

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

または、保持する別のクラスを作成することもできます display: none プロパティ：

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

してから使用します classList.add() クラスをに追加するには loader-container 素子：

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

読み込み中の要素の削除…要素

これまで、私たちを隠すことができる主要な方法を見てきました loader-container、要素はまだ存在しているが、非表示になっていることを意味します。 別のオプションは、要素を完全に削除することです。

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

この時点で、ページをロードすると、ページのコンテンツが完全にロードされるまで、ロード中のアニメーションが表示されます。

APIから外部コンテンツをリクエストする際のアニメーションの読み込みの実装

外部APIからコンテンツを取得することは、ローダーを含める必要がある別の状況です。 このタイプのコンテンツは、フェッチして表示するのに時間がかかる可能性があるため、ローダーを含めることをお勧めします。

私たちの場合、から見積もりを取得してみましょう APIを引用します 組み込みのFetchAPIを使用します。 この記事の冒頭で作成したHTMLには、 「見積もりを生成」 ボタン。 私たちがしなければならないのは、 document.querxySelector() 要素を取得し、を処理するためのコールバック関数を作成するメソッド click ユーザーがボタンをクリックしたときにトリガーされるイベント：

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; });
});

これは、アプリケーションにランダムな引用符を取り込むのに役立ちますが、 アニメーションの読み込み ユーザーがコンテンツを期待していることを認識できるようにします。 これを実現するために、XNUMXつのメソッドを作成します。XNUMXつは表示するメソッドです。 loader-container そしてそれを隠すための他のもの：

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

この時点で、最終的にロードアニメーションをコールバック関数に組み込むことができます。 フェッチが開始されると、コールバック関数は読み込み中のアニメーションを表示し、データが受信されると非表示にします。

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; });
});

まとめ

この記事では、バニラJavaScriptを使用して読み込みアニメーションを作成し、適切に表示する方法を学びました。 これを実現するためのさまざまなアプローチを検討し、アニメーションの読み込みのいくつかの異なるユースケースを検討しました。 回転する円をローダーとして使用することを選択しましたが、好きなように変更できます。自由に独自の円を作成してください。 GIF またはCSSアニメーションローダー。

• コインスマート。 ヨーロッパで最高のビットコインと暗号通貨取引所。
• Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 出入り自由。
• CryptoHawk。 アルトコインレーダー。 無料トライアル。
• ソース：https：//stackabuse.com/loading-animation-in-vanilla-javascript/