😺
簡単なローディング画面表示機能 | 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);
Discussion