Glitchy loader

html #animation
<script>
	document.addEventListener('DOMContentLoaded', function () {
		const divs = document.querySelectorAll('.grid > div');

		function randomInt(min, max) {
			return Math.floor(Math.random() * (max - min + 1) + min);
		}

		const elements = Array.from(divs);
		const hiddenElements = [];

		function step() {
			hiddenElements.forEach((e) => {
				if (Math.random() < 0.5) {
					e.style.opacity = 1;
				}
			});

			const n = randomInt(5, 20);
			const itemsToHide = Array.from(Array(n).keys());

			itemsToHide.forEach((i) => {
				const index = randomInt(0, elements.length - 1);
				const item = elements[index];
				item.style.opacity = 0;
				hiddenElements.push(item);
			});

			setTimeout(() => {
				requestAnimationFrame(step);
			}, 1000 / 1.1);
		}

		window.requestAnimationFrame(step);
	}, false);
</script>

<style>
	:root {
		--cell-size: 6px;
	}

	body {
		background: #2e4c43;
		padding: 2rem;
	}

	.grid {
		display: grid;
		grid-template-columns: repeat(6, var(--cell-size));
	}

	.grid > div {
		width: var(--cell-size);
		height: var(--cell-size);
		background: #e3f2f8;
		transition: opacity 0.4s;
	}
</style>

<div class="grid">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>