HTML CSS
(quick & simple example)
<div id="spinner"> <img src="ajax-loader.gif"> </div>
#spinner { COVER FULL SCREEN position: fixed; top: 0; left: 0; z-index: 9999; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); transition: opacity 0.2s;
CENTER SPINNER display: flex; align-items: center; justify-content: center; }
HIDE BY DEFAULT #spinner { visibility: hidden; opacity: 0; }
SHOW SPINNER #spinner.show { visibility: visible; opacity: 1; }
function show () { document.getElementById("spinner") .classList.add("show"); }
function hide () { document.getElementById("spinner") .classList.remove("show"); }