prof3ssorSt3v3/loader.css

## loader.css
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-weight: 100;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
}
html {
  font-size: 20px;
  color-scheme: dark light;
}
body {
  min-height: 100vh;
  background-image: radial-gradient(
      circle at 15% 59%,
      rgba(101, 101, 101, 0.04) 0%,
      rgba(101, 101, 101, 0.04) 50%,
      rgba(44, 44, 44, 0.04) 50%,
      rgba(44, 44, 44, 0.04) 100%
    ),
    radial-gradient(
      circle at 47% 11%,
      rgba(240, 240, 240, 0.04) 0%,
      rgba(240, 240, 240, 0.04) 50%,
      rgba(29, 29, 29, 0.04) 50%,
      rgba(29, 29, 29, 0.04) 100%
    ),
    radial-gradient(
      circle at 73% 44%,
      rgba(252, 252, 252, 0.04) 0%,
      rgba(252, 252, 252, 0.04) 50%,
      rgba(130, 130, 130, 0.04) 50%,
      rgba(130, 130, 130, 0.04) 100%
    ),
    radial-gradient(
      circle at 72% 91%,
      rgba(234, 234, 234, 0.04) 0%,
      rgba(234, 234, 234, 0.04) 50%,
      rgba(48, 48, 48, 0.04) 50%,
      rgba(48, 48, 48, 0.04) 100%
    ),
    radial-gradient(
      circle at 27% 3%,
      rgba(48, 48, 48, 0.04) 0%,
      rgba(48, 48, 48, 0.04) 50%,
      rgba(163, 163, 163, 0.04) 50%,
      rgba(163, 163, 163, 0.04) 100%
    ),
    linear-gradient(90deg, rgb(116, 48, 82), rgb(207, 76, 172));
}
header,
nav,
main {
  padding: 1rem 4rem;
}
header h1 {
  font-size: 4rem;
}
main p {
  margin: 1rem 0;
  padding: 0 4rem;
}
p.bigBright {
  font-weight: 900;
  letter-spacing: 8px;
}
button {
  padding: 0.25rem 2rem;
  font-size: 1.2rem;
  cursor: pointer;
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  place-content: center;
  width: 100vw;
  height: 100vh;
  background-color: hsla(0, 0%, 0%, 0.7);
  color: goldenrod;
  font-size: 3rem;
  padding: 5rem;
}
.overlay.active {
  display: grid;
}
.overlay > * {
  animation-name: pulse;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: paused;
}
.overlay.active > * {
  animation-play-state: running;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
  }
}

## loader.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./loader.css" />
    <script src="./loader.js" defer></script>
  </head>
  <body>
    <header>
      <h1>Spinner | Loader</h1>
    </header>
    <nav>
      <button id="btnGo">Fetch Data</button>
    </nav>
    <main></main>
    <div class="overlay">
      <h1>LOOK AT ME...<br />...and forget you are waiting</h1>
    </div>
  </body>
</html>

## loader.js
const btn = document.getElementById('btnGo');
const overlay = document.querySelector('.overlay');

btn.addEventListener('click', (ev) => {
  //show a spinner while loading
  spin();
  //want to clear old content?
  clearContent();

  let url = 'https://jsonplaceholder.typicode.com/users/';
  fetch(url)
    .then((response) => {
      if (!response.ok) throw new Error(response.statusText);
      return delay(2000).then(() => response.json());
    })
    .then((data) => {
      //we have the data
      //hide the spinner
      spin(false);
      //add the data to the page
      document.querySelector('main').innerHTML = data.map((item) => `<p>${item.name}</p>`).join('');
    })
    .catch((err) => {
      spin(false);
    });
});

function spin(show = true) {
  if (show) {
    overlay.classList.add('active');
  } else {
    overlay.classList.remove('active');
  }
}

function delay(timmy = 2000) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, timmy);
  });
}

async function clearContent() {
  const main = document.querySelector('main');
  //main.innerHTML = ''; //instantly remove all the old ones

  //remove with a slight delay between each
  let paras = Array.from(main.querySelectorAll('p')).reverse();
  for await (p of paras) {
    p.classList.add('bigBright');

    await delay(125); //pause before removing the paragraph...inside the for await of loop
    p.remove();
  }
}
	* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	font-weight: 100;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
	'Helvetica Neue', sans-serif;
	}
	html {
	font-size: 20px;
	color-scheme: dark light;
	}
	body {
	min-height: 100vh;
	background-image: radial-gradient(
	circle at 15% 59%,
	rgba(101, 101, 101, 0.04) 0%,
	rgba(101, 101, 101, 0.04) 50%,
	rgba(44, 44, 44, 0.04) 50%,
	rgba(44, 44, 44, 0.04) 100%
	),
	radial-gradient(
	circle at 47% 11%,
	rgba(240, 240, 240, 0.04) 0%,
	rgba(240, 240, 240, 0.04) 50%,
	rgba(29, 29, 29, 0.04) 50%,
	rgba(29, 29, 29, 0.04) 100%
	),
	radial-gradient(
	circle at 73% 44%,
	rgba(252, 252, 252, 0.04) 0%,
	rgba(252, 252, 252, 0.04) 50%,
	rgba(130, 130, 130, 0.04) 50%,
	rgba(130, 130, 130, 0.04) 100%
	),
	radial-gradient(
	circle at 72% 91%,
	rgba(234, 234, 234, 0.04) 0%,
	rgba(234, 234, 234, 0.04) 50%,
	rgba(48, 48, 48, 0.04) 50%,
	rgba(48, 48, 48, 0.04) 100%
	),
	radial-gradient(
	circle at 27% 3%,
	rgba(48, 48, 48, 0.04) 0%,
	rgba(48, 48, 48, 0.04) 50%,
	rgba(163, 163, 163, 0.04) 50%,
	rgba(163, 163, 163, 0.04) 100%
	),
	linear-gradient(90deg, rgb(116, 48, 82), rgb(207, 76, 172));
	}
	header,
	nav,
	main {
	padding: 1rem 4rem;
	}
	header h1 {
	font-size: 4rem;
	}
	main p {
	margin: 1rem 0;
	padding: 0 4rem;
	}
	p.bigBright {
	font-weight: 900;
	letter-spacing: 8px;
	}
	button {
	padding: 0.25rem 2rem;
	font-size: 1.2rem;
	cursor: pointer;
	}
	.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	place-content: center;
	width: 100vw;
	height: 100vh;
	background-color: hsla(0, 0%, 0%, 0.7);
	color: goldenrod;
	font-size: 3rem;
	padding: 5rem;
	}
	.overlay.active {
	display: grid;
	}
	.overlay > * {
	animation-name: pulse;
	animation-duration: 0.8s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: paused;
	}
	.overlay.active > * {
	animation-play-state: running;
	}

	@keyframes pulse {
	0% {
	opacity: 1;
	}
	100% {
	opacity: 0.1;
	}
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<link rel="stylesheet" href="./loader.css" />
	<script src="./loader.js" defer></script>
	</head>
	<body>
	<header>
	<h1>Spinner \| Loader</h1>
	</header>
	<nav>
	<button id="btnGo">Fetch Data</button>
	</nav>
	<main></main>
	<div class="overlay">
	<h1>LOOK AT ME...<br />...and forget you are waiting</h1>
	</div>
	</body>
	</html>
	const btn = document.getElementById('btnGo');
	const overlay = document.querySelector('.overlay');

	btn.addEventListener('click', (ev) => {
	//show a spinner while loading
	spin();
	//want to clear old content?
	clearContent();

	let url = 'https://jsonplaceholder.typicode.com/users/';
	fetch(url)
	.then((response) => {
	if (!response.ok) throw new Error(response.statusText);
	return delay(2000).then(() => response.json());
	})
	.then((data) => {
	//we have the data
	//hide the spinner
	spin(false);
	//add the data to the page
	document.querySelector('main').innerHTML = data.map((item) => `<p>${item.name}</p>`).join('');
	})
	.catch((err) => {
	spin(false);
	});
	});

	function spin(show = true) {
	if (show) {
	overlay.classList.add('active');
	} else {
	overlay.classList.remove('active');
	}
	}

	function delay(timmy = 2000) {
	return new Promise((resolve, reject) => {
	setTimeout(resolve, timmy);
	});
	}

	async function clearContent() {
	const main = document.querySelector('main');
	//main.innerHTML = ''; //instantly remove all the old ones

	//remove with a slight delay between each
	let paras = Array.from(main.querySelectorAll('p')).reverse();
	for await (p of paras) {
	p.classList.add('bigBright');

	await delay(125); //pause before removing the paragraph...inside the for await of loop
	p.remove();
	}
	}