ローディングアニメーションは、ページの読み込みの最中にアニメーションを出すことで、待ち時間のストレスが軽減され、イケてるものだとその待ち時間もなんだか楽しいものになります。
以下の記事ではjQueryで記述したアニメーションですが、今回の記事は丸がグルグル回るJavascriptでの簡単なローディングアニメーションです。
関連記事 jQueryのコピペでできるページ切り替え時のローディングアニメーション
この記事は、そんなローディングアニメーションについて、
- ローディングアニメーションのデザインサンプル。
- HTML+CSS+Javascriptのコピペ用コード一式。
- 見た目を変える時の簡単な解説。
の内容です。
カスタマイズも容易で簡単に実装もできるので、気になった方は是非コピペして使ってみてください。
実装後のサンプル
ローディングアニメーションはこのページでも実装されているので、ご覧なる際はページ更新をしてみてください。
ちなみに、アニメーションは以下の動画の挙動になります。
コピペ用のコード一式
HTML＋CSS＋Javascriptのコード一式です。
HTMLは<body>〜</body>の中のなるべく頭の方に記述し、Javascriptは <body>〜</body> のクロージングタグの直前にコピペします。
CSSは外部ファイルなど、好きなところに記述しましょう。
コードを表示する
HTML
<div id="js-loader" class="loader"></div>
CSS
.loader {
align-items: center;
background: #fff;
bottom: 0;
display: flex;
justify-content: center;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 999;
}
.loader::after {
animation: loader 0.5s linear infinite;
border: 1px solid #6bb6ff; /* 丸の色の指定 */
border-radius: 50%;
border-right: 1px solid rgba(200, 228, 255, 0.2); /* 丸のサブ色の指定 */
border-top: 1px solid rgba(200, 228, 255, 0.2); /* 丸のサブ色の指定 */
content: "";
height: 100px; /* 丸のサイズ */
width: 100px; /* 丸のサイズ */
}
@keyframes loader {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
Javascript
const loader = document.getElementById('js-loader');
window.addEventListener('load', () => {
const ms = 400;
loader.style.transition = 'opacity ' + ms + 'ms';
const loaderOpacity = function(){
loader.style.opacity = 0;
}
const loaderDisplay = function(){
loader.style.display = "none";
}
setTimeout(loaderOpacity, 1000);
setTimeout(loaderDisplay, 1000 + ms);
});ローディング時の丸の色を変更したい時
CSSの .loader::after の中にある以下の border 関連で、ローディング時の丸の色の指定を行います。
なので、この3つの箇所を好みの色に変更して活用ください。
CSS
border: 1px solid #6bb6ff; /* 丸の色の指定 */
border-right: 1px solid rgba(200, 228, 255, 0.2); /* 丸のサブ色の指定 */
border-top: 1px solid rgba(200, 228, 255, 0.2); /* 丸のサブ色の指定 */ローディング時の丸のサイズを変えたい時
丸のサイズを変更したい時、これも同じくCSSの .loader::after の中にあるwidth と height のサイズを変更します。
その時、同じpx数値にすると綺麗な丸の形になります。
CSS
height: 100px; /* 丸のサイズ */
width: 100px; /* 丸のサイズ */
