【jQuery】ローディングアニメーション CSS版
ローディング
まずサイトにアクセスすると、下の画像のような画面になります。黒い画面の中央にアニメーションが表示され…
サイトの読み込みが終わったら、この黒い画面がフェードアウトして、コンテンツが現れる、という流れになります。
システム自体は非常にシンプルですので、続けてコードを見ていきましょう。
実際のコード
<div id="loading" class="l-loading">
<div class="fingerprint-spinner">
<div class="spinner-ring"></div>
<div class="spinner-ring"></div>
<div class="spinner-ring"></div>
<div class="spinner-ring"></div>
<div class="spinner-ring"></div>
<div class="spinner-ring"></div>
<div class="spinner-ring"></div>
<div class="spinner-ring"></div>
<div class="spinner-ring"></div>
</div>
</div>
<main class="l-main">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut iusto ipsam non facere quam maxime obcaecati optio atque nihil error quaerat dolorem quibusdam ipsa quod, laudantium, ullam temporibus reiciendis cumque?
Quis, repellendus error. Ex reprehenderit, consequuntur, expedita tenetur voluptas quaerat rerum repudiandae sapiente a inventore quod necessitatibus odio ipsum reiciendis. Animi sit eos temporibus quos obcaecati explicabo minus, ipsam cumque!
Quod blanditiis quo minus quia facilis nobis! Ipsam vero accusantium cum numquam tenetur saepe quasi blanditiis consequuntur repudiandae! Dolorem tempore impedit voluptatibus quidem corrupti sint vel harum, nihil dignissimos doloremque!
Accusantium, praesentium reiciendis dicta commodi labore rem cumque similique illo numquam molestias perspiciatis iusto explicabo architecto culpa eaque, dolorem fugit quibusdam nostrum impedit vero porro minima officia! Vel, quia adipisci.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut iusto ipsam non facere quam maxime obcaecati optio atque nihil error quaerat dolorem quibusdam ipsa quod, laudantium, ullam temporibus reiciendis cumque?
Quis, repellendus error. Ex reprehenderit, consequuntur, expedita tenetur voluptas quaerat rerum repudiandae sapiente a inventore quod necessitatibus odio ipsum reiciendis. Animi sit eos temporibus quos obcaecati explicabo minus, ipsam cumque!
Quod blanditiis quo minus quia facilis nobis! Ipsam vero accusantium cum numquam tenetur saepe quasi blanditiis consequuntur repudiandae! Dolorem tempore impedit voluptatibus quidem corrupti sint vel harum, nihil dignissimos doloremque!
Accusantium, praesentium reiciendis dicta commodi labore rem cumque similique illo numquam molestias perspiciatis iusto explicabo architecto culpa eaque, dolorem fugit quibusdam nostrum impedit vero porro minima officia! Vel, quia adipisci.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut iusto ipsam non facere quam maxime obcaecati optio atque nihil error quaerat dolorem quibusdam ipsa quod, laudantium, ullam temporibus reiciendis cumque?
Quis, repellendus error. Ex reprehenderit, consequuntur, expedita tenetur voluptas quaerat rerum repudiandae sapiente a inventore quod necessitatibus odio ipsum reiciendis. Animi sit eos temporibus quos obcaecati explicabo minus, ipsam cumque!
Quod blanditiis quo minus quia facilis nobis! Ipsam vero accusantium cum numquam tenetur saepe quasi blanditiis consequuntur repudiandae! Dolorem tempore impedit voluptatibus quidem corrupti sint vel harum, nihil dignissimos doloremque!
Accusantium, praesentium reiciendis dicta commodi labore rem cumque similique illo numquam molestias perspiciatis iusto explicabo architecto culpa eaque, dolorem fugit quibusdam nostrum impedit vero porro minima officia! Vel, quia adipisci.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut iusto ipsam non facere quam maxime obcaecati optio atque nihil error quaerat dolorem quibusdam ipsa quod, laudantium, ullam temporibus reiciendis cumque?
Quis, repellendus error. Ex reprehenderit, consequuntur, expedita tenetur voluptas quaerat rerum repudiandae sapiente a inventore quod necessitatibus odio ipsum reiciendis. Animi sit eos temporibus quos obcaecati explicabo minus, ipsam cumque!
Quod blanditiis quo minus quia facilis nobis! Ipsam vero accusantium cum numquam tenetur saepe quasi blanditiis consequuntur repudiandae! Dolorem tempore impedit voluptatibus quidem corrupti sint vel harum, nihil dignissimos doloremque!
Accusantium, praesentium reiciendis dicta commodi labore rem cumque similique illo numquam molestias perspiciatis iusto explicabo architecto culpa eaque, dolorem fugit quibusdam nostrum impedit vero porro minima officia! Vel, quia adipisci.
</p>
</main>/* ローディング画面 */
.l-loading {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #191919;
transition: all 0.5s 5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.l-loading.loaded {
opacity: 0;
visibility: hidden;
}
.fingerprint-spinner, .fingerprint-spinner * {
box-sizing: border-box;
}
.fingerprint-spinner {
height: 64px;
width: 64px;
padding: 2px;
overflow: hidden;
position: relative;
}
.fingerprint-spinner .spinner-ring {
position: absolute;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: #ff1d5e;
animation: fingerprint-spinner-animation 1500ms cubic-bezier(0.68, -0.75, 0.265, 1.75) infinite forwards;
margin: auto;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
.fingerprint-spinner .spinner-ring:nth-child(1) {
height: calc(60px / 9 + 0 * 60px / 9);
width: calc(60px / 9 + 0 * 60px / 9);
animation-delay: calc(50ms * 1);
}
.fingerprint-spinner .spinner-ring:nth-child(2) {
height: calc(60px / 9 + 1 * 60px / 9);
width: calc(60px / 9 + 1 * 60px / 9);
animation-delay: calc(50ms * 2);
}
.fingerprint-spinner .spinner-ring:nth-child(3) {
height: calc(60px / 9 + 2 * 60px / 9);
width: calc(60px / 9 + 2 * 60px / 9);
animation-delay: calc(50ms * 3);
}
.fingerprint-spinner .spinner-ring:nth-child(4) {
height: calc(60px / 9 + 3 * 60px / 9);
width: calc(60px / 9 + 3 * 60px / 9);
animation-delay: calc(50ms * 4);
}
.fingerprint-spinner .spinner-ring:nth-child(5) {
height: calc(60px / 9 + 4 * 60px / 9);
width: calc(60px / 9 + 4 * 60px / 9);
animation-delay: calc(50ms * 5);
}
.fingerprint-spinner .spinner-ring:nth-child(6) {
height: calc(60px / 9 + 5 * 60px / 9);
width: calc(60px / 9 + 5 * 60px / 9);
animation-delay: calc(50ms * 6);
}
.fingerprint-spinner .spinner-ring:nth-child(7) {
height: calc(60px / 9 + 6 * 60px / 9);
width: calc(60px / 9 + 6 * 60px / 9);
animation-delay: calc(50ms * 7);
}
.fingerprint-spinner .spinner-ring:nth-child(8) {
height: calc(60px / 9 + 7 * 60px / 9);
width: calc(60px / 9 + 7 * 60px / 9);
animation-delay: calc(50ms * 8);
}
.fingerprint-spinner .spinner-ring:nth-child(9) {
height: calc(60px / 9 + 8 * 60px / 9);
width: calc(60px / 9 + 8 * 60px / 9);
animation-delay: calc(50ms * 9);
}
@keyframes fingerprint-spinner-animation {
100% {
transform: rotate(360deg);
}
}
.l-main {
width: 1000px;
margin: 0 auto;
}
p {
margin-top: 50px;
font-size: 18px;
letter-spacing: 1px;
}window.onload = function() {
var loading = $('#loading');
loading.addClass('loaded');
}サイトのメインコンテンツとローディング画面用のHTMLを別個で記述することが重要です。
解説
CSSのみ記述の量は多めですが、やっていることはそこまで複雑ではありません。流れで言うと…
1.ローディングアニメーション用のHTML(div.l-loading)をあらかじめ用意しておく。
2.サイト全体の読み込みが終了したタイミングで、その要素をフェードアウトさせる。
まずは、ローディングアニメーションを用意しましょう。自分でCSSをチマチマ記述して作ることもできますが、中々時間がかかると思います。そこで、ローディング用のCSSアニメーションを公開・提供しているWebサービス「Epic Spinners」を利用したいと思います。利用したいアニメーションのコードをコピーして、自分のHTML/CSSファイルに貼り付ければOKです。（今回の記事で言うと、「div.fingerprint-spinner」がコピーしてきたものになります）
「div.spinner-ring」のCSSは基本的にいじる必要はありません。ただし、widthやheightの値に用いられている「calc」について、初めてみる方もいらっしゃるかもなので、そこだけ軽く解説しておきましょう。
これは「calc関数」と呼ばれるもので、プロパティの値を指定する際に用いられます。calcの後に続く()の中に計算式を記述すると、その式の答えが値として適用される、と言うものになります。例えば「calc(100px + 10px)」と書いたら「110px」が値になる、と言う具合です。詳しくはこちらをご覧ください。
実は、これだけでローディングアニメーションの用意は完了なんですね。あとは、それを読み込みが終了したタイミングでフェードアウトさせるだけです。
window.onload = function() {
読み込みが完了したら実行したい処理
}windowに対して、「onload」イベントを設定します。サイトのコンテンツ（画像やテキストなど）の読み込みが完了したタイミングで処理を実行する、と言うもの。
var loading = $('#loading');
loading.addClass('loaded');具体的な処理を見ていきましょう。
ローディング用のHTMLには「l-loading」と言うClassの他に「loading」と言う名前のIDをつけています。これを変数に格納し、新しく「loaded」と言うクラスを付与。CSSを見ると、「loaded」が付与された際のスタイリングがすでに記述されているので、これでフェードアウトの演出は実装されたことになります。
余談
今回の記事では、ローディング用のCSSアニメーションを「Epic Spinners」というサイトから引っ張ってきましたが、他にもいろんなサイトでアニメーションが公開されています。いくつかご紹介しておきます。
・Epic Spinners（←記事で用いたサイト）
・Single Element CSS Spinners
・SpinKit | Simple CSS Spinners
・Pure CSS Loader
・Loaders.css
こちらの記事はいかがでしたか？
+1
+1
+1
+1
