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