Javascriptのコピペでできるページ切り替え時に丸がグルグル回るローディングアニメーション

Javaローディングのイラスト

ローディングアニメーションは、ページの読み込みの最中にアニメーションを出すことで、待ち時間のストレスが軽減され、イケてるものだとその待ち時間もなんだか楽しいものになります。

以下の記事では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 の中にあるwidthheight のサイズを変更します。

その時、同じpx数値にすると綺麗な丸の形になります。

CSS

  height: 100px; /* 丸のサイズ */
  width: 100px; /* 丸のサイズ */

レンタルサーバー