HTML CSS
FULL SCREEN LOADING SPINNER WITH HTML & CSS
<div id="spinner"> <img src="ajax-loader.gif"/> </div>
LOADING SPINNER HTML
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; }
SPINNER CSS (PART 1)
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; }
SPINNER CSS (PART 2)
03
function show () { document.getElementById("spinner") .classList.add("show"); } function hide () { document.getElementById("spinner") .classList.remove("show"); }
JAVASCRIPT TOGGLE
04