HTML CSS
<div id="spinner"> <img src="ajax-loader.gif"/> </div>
01
FULL SCREEN WRAPPER #spinner { position: fixed; top: 0; left: 0; z-index: 9999; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); transition: opacity 0.2s; }
02
CENTER LOADING SPINNER #spinner img { position: absolute; top: 50%; left: 50%; transform: translate(-50%); }
HIDE BY DEFAULT #spinner { visibility: hidden; opacity: 0; } SHOW SPINNER #spinner.show { visibility: visible; opacity: 1; }
03
function show () { document.getElementById("spinner") .classList.add("show"); } function hide () { document.getElementById("spinner") .classList.remove("show"); }
04