CSS を利用したローディングアニメーションのサンプルは既に山ほど Web 上に公開されていますが、別件でコーディングをしていた流れで、たまたまローディングアニメーションのコードも適当に作ってみたので、いくつかのサンプルと共に、jQuery や外部モジュールも利用せず、実際に利用するための簡易的な方法をご紹介します。
まずは、今回適当に作成したローディングアニメーションのデモをご覧ください。
See the Pen
Simple CSS Spinner valiation by digistate (@digistate)
on CodePen.
この HTML と CSS を基礎にして、以下に実際に利用するための手順をまとめます。
HTML の構造
各ローディングアニメーション要素の HTML の構造は至ってシンプルです。
<div class="box">
<!-- type1 〜 type8 はお好みで -->
<div class="spinner type1">
<span>Loading...</span>
</div>
</div>
CSS
アニメーションの元となる .spinner 要素の CSS は、以下を基本とします。
/* ローディングアニメーション */
.spinner {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transform-origin: center;
transform-origin: center;
width: 120px;
height: 120px;
}
/* Loading テキスト */
.spinner span {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 12px;
}
今回のデモでは、8種類のアニメーションパターンがありますが、例えば1番目のアニメーションであれば、上記のベースの CSS に加えて以下を追加します。
/* 1番目のアニメーションの場合 */
.spinner.type1 {
border-radius: 50%;
border-width: 8px;
border-style: solid;
border-color: #fff rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12);
/* ローディング要素のアニメーションを指定 */
-webkit-animation: spinner1_1 1.5s infinite linear forwards;
animation: spinner1_1 1.5s infinite linear forwards;
}
.spinner.type1 span {
/* Loading テキストのアニメーションを指定 */
animation: spinner_loading_text 1.5s infinite linear forwards reverse;
}
/* ローディング要素のアニメーション内容 */
@-webkit-keyframes spinner1_1 {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0);
transform: translate(-50%, -50%) rotate(0);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes spinner1_1 {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0);
transform: translate(-50%, -50%) rotate(0);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* Loading テキストのアニメーション内容 */
@-webkit-keyframes spinner_loading_text {
0% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
50% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotate(180deg);
transform: translate(-50%, -50%) rotate(180deg);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes spinner_loading_text {
0% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
50% {
opacity: 0;
-webkit-transform: translate(-50%, -50%) rotate(180deg);
transform: translate(-50%, -50%) rotate(180deg);
}
100% {
opacity: 1;
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
次に、このデモの構造を利用して実際にローディング表示として実装する簡単な方法をご紹介します。
実際にページの「読み込み中」要素として利用してみる
このローディングアニメーションを、Webページにアクセスした際に、最初に表示させてページ読み込み後に自動的に消えるようにする場合は、例えば以下のようにします。
HTML
実際に利用するローディングコンテンツの要素は1つのみなので、 type1 〜 type8 の中から適当に1つ選択し .spinner セレクタに繋げてセットします。
また、ラッパー要素の .box には、JavaScript で操作するために適当な ID をつけておきます(以下では #my-spinner )。
<div id="my-spinner" class="box">
<!-- type1 〜 type8 はお好みで -->
<div class="spinner type1">
<span>Loading...</span>
</div>
</div>
このHTMLを、<body> の直後か </body> の直前に挿入しておきます。
CSS
ローディングコンテンツ(.box)の表示は、フルスクリーンで表示させるため、上記デモのものではなく以下のようにしておきます。
.box{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
-webkit-transition: all 1.2s ease; /* 1.2秒でフェードアウト */
transition: all 1.2s ease;
color: #fff; /* ローディングアニメーションカラー */
background-color: #333; /* 背景カラー */
}
読み込み完了時には、JavaScript からフルスクリーン表示を消すための class を挿入します。
これについてのスタイルも用意します。
/* ローディング表示を消すための定義 */
.box.loaded{
opacity:0;
visibility:hidden;
pointer-events:none;
}
.spinner 等の他の要素の CSS はデモのものをそのまま利用できます。
JavaScript
JavaScript では、ページ内のすべてのリソース(DOMツリー、画像、その他外部リソース等)の読み込み完了時にローディング表示を消すようにします。
window.onload = function() {
let spinner = document.getElementById('my-spinner');
// .box に .loaded を追加してローディング表示を消す
spinner.classList.add('loaded');
}
たったこれだけで、外部モジュールも必要とせず、自作でローディングアニメーション表示ができます。