HTML CSS

FULL SCREEN LOADING SPINNER

(quick & simple example)

<div id="spinner">   <img src="ajax-loader.gif"> </div>

LOADING SPINNER HTML

01

#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;

SPINNER CSS (PART 1)

02

  CENTER SPINNER   display: flex;   align-items: center;   justify-content: center; }

HIDE BY DEFAULT #spinner {   visibility: hidden; opacity: 0; }

SPINNER CSS (PART 2)

03

SHOW SPINNER #spinner.show {   visibility: visible; opacity: 1; }

function show () {   document.getElementById("spinner")   .classList.add("show"); }

JAVASCRIPT TOGGLE

04

function hide () {   document.getElementById("spinner")   .classList.remove("show"); }