JSFiddle - React, Tailwind, and code Playground

by aparadise

HTML

<input type="checkbox" checked="checked" id="toggle" />
<section id="sect">
	<input type="checkbox" id="toggleSize" />
	<table id="list">
		<caption>
			<h3>1div css loader</h3>
			<h4><label for="toggle" class="ckbx one">show <b>unnecessary efx</b> <span class="small">like filter, 3D shadows, etc.</span></label></h4>
			<h4><label for="toggleSize" class="ckbx two">bigger <b>font-size</b></label></h4>
		</caption>
		<tbody>
		<tr>
			<td>
				<h2>.loader-gears</h2>
				<div class="loader-gears"></div>
			</td>
			<td class="no- prio hidden">
				<h2>.loader-bubbles</h2>
				<div class="loader-bubbles"></div>
			</td>
			<td>
				<h2>.loader-pendulums</h2>
				<div class="loader-pendulums"></div>
			</td>
			<td>
				<h2>.loader-wheel-of-fortune</h2>
				<div class="loader-wheel-of-fortune">▼</div>
			</td>
			<td>
				<h2>.loader-progress-bar</h2>
				<div class="loader-progress-bar"></div>
			</td>
			<td>
				<h2>.loader-bricks</h2>
				<div class="loader-bricks"></div>
			</td>
			<td>
				<h2>.loader-funky-bar</h2>
				<div class="loader-funky-bar"></div>
			</td>
			<td>
				<h2>.loader-wobble</h2>
				<div class="loader-wobble">loading</div>
			</td>
			<td>
				<h2>.loader-drippy</h2>
				<div class="loader-drippy"></div>
			</td>
			<td>
				<h2>.loader-radar</h2>
				<div class="loader-radar"></div>
			</td>
			<td>
				<h2>.loader-bubble-disks</h2>
				<div class="loader-bubble-disks"></div>
			</td>
			<td>
				<h2>.loader-cycle-disks</h2>
				<div class="loader-cycle-disks"></div>
			</td>
			<td>
				<h2>.loader-3-bars</h2>
				<div class="loader-3-bars"></div>
			</td>
				<td>
					<h2>.loader-stopwatch</h2>
				<div class="loader-stopwatch"></div>
			</td>
			<td>
				<h2>.loader-peace-sign</h2>
				<div class="loader-peace-sign"></div>
			</td>
			<td>
				<h2>.loader-beaker</h2>
				<div class="loader-beaker"></div>
			</td>
			<td>
				<h2>.loader-floppy-disk</h2>
				<div...

CSS

// vars
// settings
// $fz: 16px; // size/scale of the loaders
$fz: unquote('calc(1vw + 1vh - .6vmin)');
$time: 1s; // time for delay/timing of loaders
// @media (min-width: 400px) and (max-width: 1024px) { body { $fz: calc(13px + (14 - 11) * ( (100vw - 400px) / ( 1024 - 400))); } }
// @media (min-width: 1024px) { body { $fz: 14px; } }

$unnecessary-efx: true;

$f: unquote("'Podkova', serif");
$fb: unquote("'Trebuchet MS', Helvetica, sans-serif");
// colors
$random_color: rgba(rd(255),rd(255),rd(255),.5);

$c: ( // colors
	t: transparent,
	s: #000,
	w: #fff,
	gr: desaturate(rgb(rd(120)+100,rd(120)+100,rd(120)+100), 100%),
	r: rgb(rd(255),rd(50),rd(50)),
	g: rgb(rd(50),rd(255),rd(50)),
	b: rgb(rd(50),rd(50),rd(255)),
	magenta: #f0f,
	cyan: #0ff,
	bg: $random_color,
	cp: ( // color palette
		1: #081E3F,
		2: #083D56,
		3: #0E5F76,
		4: #19A6CF,
	),
);

[class*='loader'] {
	position: relative;
	top: 40%;
	display: inline-block;
	margin: 0 auto;
	cursor: wait;
	text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	// -webkit-box-reflect: below .25em linear-gradient(rgba(#fff, .4), rgba(#fff, .1));
}

// ----------------------------------------------
// -------- loader-1  ---------------------------
// ----------------------------------------------

.loader-wobble { // loading circle cycle
	font-size: .8em;
	top: 50%;
	display: inline-block;
	width: 5em;
	height: 1em;
	line-height: 1.3;
	position: relative;
	color: clr(cp, 3);
	text-align: center;
	user-select: none;
	border-bottom: .1em solid;
	margin-left: -5em;
	transform: translateX(50%);
	animation: 
		loadingText $time infinite ease(wtf) alternate, 
		loadingBar $time*8 infinite ease(in-out-sine) alternate;
	
	#toggle:checked ~ #sect & { // unnecessary efx
		animation:
			loadingTextMove $time infinite ease(wtf) alternate, 
			loadingText $time infinite ease(wtf) alternate, 
			loadingBar $time*8 infinite ease(in-out-sine) alternate;
		filter:...