簡単なローディング画面表示機能 | HTML, CSS, JS

簡単なローディング画面表示機能

表示イメージ

ソースコード

ディレクトリ構成

    /
    ├ index.html
    ├ loaderview.css
    └ loaderview.js

HTML / index.html

index.html

    <!-- loaderview.js インポート -->
    <script src="./loaderview.js" inline></script>

    <!-- loaderview テンプレート -->
    <div id="loaderview" class="loaderview">
        <p class="loaderview txt" id="loaderview_message"></p>
    </div>

    <!-- loaderview 初期化 -->
    <script>
        document.addEventListener('DOMContentLoaded', (e) => {
            loaderview.init('#loaderview')
        });
    </script>

CSS / loaderview.css

loaderview.css

#loaderview {
  position: fixed;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  z-index: 555;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loaderview.txt {
  font-size: 45px;
  font-weight: bold;
  color: rgb(30, 50, 93);
}

.loaderview.fadeout {
  animation : fadeOut 1s;
  animation-fill-mode: both;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

JavaScript / loaderview.js

loaderview.js

const loaderview = (function (){
  const wrp = {
    status: false,
    element: null,
    defaultMessage: '通信中',
  };

  /**
   * ダイアログ要素をメモリに保存する
   * @param {string} elementId ダイアログのもつ ID
   */
  wrp.init = (elementId) => {
    wrp.element = document.querySelector(elementId);
    if (!wrp.element) {
      console.error('[loaderview.js] ERROR on init, element is undefined');
    } else {
      console.log('[loaderview.js] init', wrp.element);
      wrp.element.style.display = "none";
    }
  };

  /**
   * 表示する
   * @param {string} [message=this.defaultMessage] 表示メッセージ
  */
  wrp.show = (message = wrp.defaultMessage) => {
    if (wrp.status) return;
    const elem = wrp.element;
    elem.querySelector('#loaderview_message').innerText = message;
    elem.style.display = "flex";
    elem.classList.remove('fadeout');
    wrp.status = !wrp.status;
  };

  /**
   * 非表示にする
  */
  wrp.hide = () => {
    if (!wrp.status) return;
    const elem = wrp.element;
    elem.classList.add('fadeout');
    setTimeout(function(){ 
      elem.style.display = 'none'; 
    }, 1000);
    wrp.status = !wrp.status;
  };

  return wrp;
})();

使い方

表示には loaderview.show([表示メッセージ]), 非表示には loaderview.hide() を実行するだけ.

// 表示して 5 秒で非表示になる
loaderview.show('読み込み中');
setTimeout(() => {
    loaderview.hide();
}, 1000*5);

loaderview.show の引数は省略できて、その場合、loaderview.defaultMessage が割り当てられる.

loaderview.show();
// -> message = '通信中'
setTimeout(() => {
    loaderview.hide();
}, 1000*5);