cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <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">toggle <b>unnecessary efx</b> <span class="small">like filter, 3D shadows, etc.</span></label></h4>
			<h4><label for="toggleSize" class="ckbx two">toggle <b>font-size</b></label></h4>
		</caption>
		<tbody>
		<tr>
			<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 class="loader-floppy-disk"></div>
			</td>
			<td>
				<h2>.loader-zoom</h2>
				<div class="loader-zoom"></div>
			</td>
			<td>
				<h2>.loader-spinna</h2>
				<div class="loader-spinna"></div>
			</td>
			<td>
				<h2>.loader-pacman</h2>
				<div class="loader-pacman"></div>
			</td>
			<td>
				<h2>.loader-pulsing</h2>
				<div class="loader-pulsing"></div>
			</td>
			<td>
				<h2>.loader-battery</h2>
				<div class="loader-battery"></div>
			</td>
			<td>
				<h2>.loader-vinyl</h2>
				<div class="loader-vinyl"></div>
			</td>
			<td data-3d="true">
				<h2>.loader-triangle</h2>
				<div class="loader-triangle">loading</div>
			</td>
			<td data-3d="true">
				<h2>.loader-wheel</h2>
				<div class="loader-wheel"></div>
			</td>
			<td class="no-prio" data-3d="true">
				<h2>.loader-disc-bouncer</h2>
				<div class="loader-disc-bouncer"></div>
			</td>
			<td class="no-prio" data-3d="true">
				<h2>.loader-butterfly</h2>
				<div class="loader-butterfly"></div>
			</td>
			<td class="no- prio" data-3d="true">
				<h2>.loader-blow-up</h2>
				<div class="loader-blow-up"></div>
			</td>
			<td data-3d="true">
				<h2>.loader-road</h2>
				<div class="loader-road"></div>
			</td>
		</tr>
		</tbody>
	</table>
</section>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
	<defs>
		<filter id="filter-goo">
			<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur"></feGaussianBlur>
			<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo"></feColorMatrix>
			<feComposite in="SourceGraphic" operator="atop" in2="goo"></feComposite>
		</filter>
		<filter id="filter-goo2">
			<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur"></feGaussianBlur>
			<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 29 -14" result="goo"></feColorMatrix>
			<feComposite in="SourceGraphic" noperator="atop" in2="goo"></feComposite>
		</filter>
 <filter id="turbulence-1">
    <feTurbulence type="fractalNoise" baseFrequency="0.001" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

  <filter id="turbulence-2">
    <feTurbulence type="fractalNoise" baseFrequency="0.0015" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

  <filter id="turbulence-3">
    <feTurbulence type="fractalNoise" baseFrequency="0.002" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

  <filter id="turbulence-4">
    <feTurbulence type="fractalNoise" baseFrequency="0.0025" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>

  <filter id="turbulence-5">
    <feTurbulence type="fractalNoise" baseFrequency="0.003" numOctaves="2" data-filterId="3" />
    <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" scale="25" />
  </filter>
	</defs>
</svg>
            
          
!
            
              
// 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(150),rd(150)),
	g: rgb(rd(150),rd(255),rd(150)),
	b: rgb(rd(150),rd(150),rd(255)),
	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: drop-shadow(.2em .2em .2em rgba(clr(s), .5));
	}
	
	&:before, &:after {
		content: '';
		width: 7em;
		height: 7em;
		position: absolute;
		top: -3em;
		left: -.5em;
		right: 0;
		bottom: 0;
		border-radius: 50%;
	}
	
	&:before {
		box-shadow: inset 0 0 0 .2em rgba(clr(cp, 2), .5);
		animation: loadingInner $time infinite ease(wtf) alternate;
	}
	
	&:after {
	color: clr(cp, 2); //currentColor; 
	border-radius: 50%;
	border: .2em dashed;
	border-top: .2em solid clr(cp, 3);
	transform-origin: center center;
	animation: loading $time infinite ease(full-circle);
	}
}
// -------- loader-1 keyframes ------------------
@keyframes loading {
	to {
		transform: rotate(360deg);
	}
}

@keyframes loadingInner {
	to {
		transform: scale(0);
	}
}

@keyframes loadingText {
	0% {
		color: clr(cp, 3);
		width: 0em;
	}
	100% {
		color: clr(cp, 1);
		width: 4em;
	}
}

@keyframes loadingTextMove {
	0% {
		text-indent: 1em;
	}
	100% {
		text-indent: -1em;
	}
}

@keyframes loadingBar {
	0% {
		width: 0em;
	}
	100% {
		width: 6em;
	}
}

// ----------------------------------------------
// -------- loader-2 ----------------------------
// ----------------------------------------------

.loader-bricks { // bricks loader
	position: relative;
	display: inline-block;
	font-size: 1rem;
	width: 8em;
	height: 1em;
	z-index: 1;
	border-style:  solid;
	border-width: .1rem 0;
	color: clr(cp, 4);
	background-image: linear-gradient(
		to right,
		transparent 0%,
		transparent 49.9%,
		clr(cp,3) 50%,
		clr(cp,3) 100%
	);
	background-size: 25%;
	animation: loaderBar $time infinite linear;
	
	#toggle:checked ~ #sect & { // unnecessary efx
		filter: drop-shadow(.3em .3em .3em rgba(clr(s), .5));
	}
	
	&:before,
	&:after {
		content: '';
		position: absolute;
		right: 0;
		z-index: 0;
		width: 1em;
		height: 1em;
		margin-top: -.1rem;
		border: .1rem solid clr(cp, 4);
		border-width: .1rem 0;
		color: clr(cp, 3);
		background-color: currentColor;
		animation: loaderBox $time*2 infinite linear;
	}
	
	&:after {
		animation-delay:  $time;
	}
}
// -------- loader-2 keyframes ------------------

@keyframes loaderBar {
	0% {
		background-position-x: 0;
	}
	100% {
		background-position-x: 2em;
	}
}
@keyframes loaderBox {
	0% {
		color: clr(cp, 3);
		width: 1em;
		right: 0;
		top: 0;
		border-color: clr(cp,4);
	}
	27% {
		color: clr(cp, 3);
		width: 1em;
		right: -1em;
		top: 0;
		border-color: transparent;
		// filter: blur(0px);
	}
	37.5% {
		color: clr(cp, 2);
		width: 1em;
		right: -1em;
		top: -1em;
		border-color: transparent;
		// filter: blur(1px);
	}
	// 50% {
	// 	color: clr(cp, 2);
	// 	width: 1em;
	// 	right: 4em;
	// 	top: -1em;
	// 	border-color: transparent;
	// }
	50% {
	// 100% {
		color: clr(cp, 2);
		width: 1em;
		right: 8em;
		top: -1em;
		border-color: transparent;
		// filter: blur(1px);
	}
	55% {
		color: clr(cp, 3);
		width: 1em;
		right: 8em;
		top: 0em;
		border-color: transparent;
		// filter: blur(0px);
	}
	100% {
		color: clr(cp, 3);
		width: 0em;
		right: 7em;
		top: 0;
		border-color: clr(cp,4);
	}
}
// ----------------------------------------------
// -------- loader-3 ----------------------------
// ----------------------------------------------

.loader-funky-bar { // funky loader
	display: inline-block;
	width: 5em;
	height: 1em;
	border-radius: 2px;
	position: relative;
	overflow: hidden;
	z-index: 0;
	color: clr(w);
	box-shadow: 0 0 0 2px clr(cp, 1),
		0 0 0 4px clr(cp, 3);
	
	#toggle:checked ~ #sect & { // unnecessary efx
		filter: drop-shadow(.25em .25em .25em rgba(clr(s), .5));
	}
	
	&:before {
		content: 'loading...';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		animation: loaderText $time infinite alternate ease(perpetuum);

		#toggle:checked ~ #sect & { // unnecessary efx
			animation: 
				loaderText $time*2 infinite alternate ease(perpetuum),
				textIndent $time infinite alternate ease(perpetuum);
			
		}
	}
	
	&:after {
		content: '';
		width: 11em;
		height: 11em;
		position: absolute;
		left: -6em;
		top: -5em;
		z-index: 1;
		box-shadow: 
			inset 0 0 0 0.5em clr(cp, 3),
			inset 0 0 0 1em clr(cp, 2),
			inset 0 0 0 1.5em clr(cp, 3),
			inset 0 0 0 2em clr(cp, 2),
			inset 0 0 0 2.5em clr(cp, 3),
			inset 0 0 0 3em clr(cp, 2),
			inset 0 0 0 3.5em clr(cp, 3),
			inset 0 0 0 4em clr(cp, 2),
			inset 0 0 0 4.5em clr(cp, 3),
			inset 0 0 0 5em clr(cp, 2),
			inset 0 0 0 5.5em clr(cp, 3),
			inset 0 0 0 6em clr(cp, 2);
		border-radius: 16em 14em / 16em 20em;
		transform-origin: center center;
		animation: loaderRotate $time*5 linear infinite, loaderMover $time*15 linear infinite;
	}
}
// -------- loader-3 keyframes ------------------
@keyframes loaderRotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
@keyframes loaderMover {
	from {
		left: -11em;
	}
	to {
		left: -6em;
	}
}
@keyframes textIndent {
	from {
		text-indent: -2em;
	}
	to {
		text-indent: 2em;
	}
}
@keyframes loaderText {
	from {
		color: clr(cp, 4);
	}
	to {
		color: clr(cp, 1);
	}
}

// ----------------------------------------------
// -------- loader-4 ----------------------------
// ----------------------------------------------
.loader-drippy { // drippy drop loader
	display: inline-block;
	position: relative;
	width: 3em;
	height: 3em;
	top: 30%;
	border-radius: 50% 0em 50% 50%;
	box-shadow: 
		0 0 0 .25em clr(cp, 1),
		0 0 0 .5em clr(cp, 3);
	transform: rotate(135deg);
	
	#toggle:checked ~ #sect & { // unnecessary efx
		box-shadow: 
		0 0 0 .25em clr(cp, 1),
		0 0 0 .5em clr(cp, 3),
		-.2em -.2em .2em .5em rgba(clr(s), .25);
	}
	
	&:before {
		content: '';
		position: absolute;
		display: block;
		border-radius: 50% 0em 50% 50%;
		overflow: hidden;
		z-index: 0;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-image: 
			repeating-linear-gradient(
				45deg,
				clr(cp, 2) 0,
				clr(cp, 2) 9px,
				transparent 10px,
				transparent 19px
			);
		background-position: center center;
		background-size: 100% 100%;
		animation: loaderZoom $time ease(downhill) infinite;
	}
	
	&:after {
		content: '';
		width: 1em;
		height: 1em;
		position: absolute;
		bottom: 90%;
		left: 90%;
		z-index: -2;
		border-radius: 50%;
		background-color: clr(cp, 2);
		box-shadow: 
			inset -0.05em -0.25em .05em clr(cp, 3);
		animation: loaderDrip $time*3 ease(gravity) infinite forwards;
		
		#toggle:checked ~ #sect & { // unnecessary efx
			box-shadow: 
				inset -0.05em -0.25em .05em clr(cp, 3),
				-.2em -.2em .2em rgba(clr(s), .25);
		}
	}
}
// -------- loader-4 keyframes ------------------

@keyframes loaderZoom {
	from {
		background-size: 200% 200%;
	}
	to {
		background-size: 141% 141%;
	}
}

@keyframes loaderDrip {
	0% {
		bottom: 105%;
		left: 105%;
		width: 0.1em;
		height: 0.1em;
		border-radius: 3em 3em 3em 3em;
		opacity: 1;
	}
	70% {
		bottom: 120%;
		left: 120%;
		width: 1em;
		height: 1em;
		border-radius: 6em 6em 6em 0;
		opacity: 1;
	}
	80% {
		bottom: 130%;
		left: 130%;
		border-radius: 3em 6em;
		opacity: 1;
	}
	94% {
		bottom: 150%;
		left: 150%;
		border-radius: 2em 6em;
		opacity: 1;
	}
	100% {
		bottom: 150%;
		left: 150%;
		border-radius: .5em 6em;
		opacity: 0;
	}
}

// ----------------------------------------------
// -------- loader-5 ----------------------------
// ----------------------------------------------
.loader-stopwatch { // grannys clock loader
	display: inline-block;
	position: relative;
	top: 30%;
	width: 5em;
	height: 5em;
	border-radius: 50%;
	border: .36em dotted rgba(clr(cp, 3), .5);
	transform-origin: center -300%;
	
	#toggle:checked ~ #sect & { // unnecessary efx
		animation: rotateClock 5s infinite ease-in-out;
		filter: drop-shadow(.2em .2em .2em rgba(clr(s), .5));
	}
	
	&:before {
		content: '';
		position: absolute;
		left: 50%;
		top: 2.14em;
		z-index: 1;
		display: block;
		height: 2em;
		width: 0;
		transform-origin: center top;
		box-shadow: 0 0 0 .11em clr(cp,3);
		animation: rotatePointer $time*3 infinite /* steps(30) */ linear;
	}
	
	&:after {
		content: '\2022';
		position: absolute;
		left: .7em;
		top: .7em;
		width: 3em;
		height: 3em;
		line-height: 0;
		color: transparent;
		text-indent: 3em;
    text-shadow: -3px -5px 3px clr(cp,4);
		border-radius: 50% 0 50% 50%;
		border: 3px solid clr(cp, 3);
		background-color: clr(cp, 1);
		background-color: clr(cp, 2);
		transform-origin: center center;
		animation: rotatePointer $time*10 infinite linear;
	}
}
// -------- loader-5 keyframes ------------------
@keyframes rotatePointer {
	to {
		transform: rotate(359deg);
	}
}

@keyframes rotateClock {
	0%, 100% {
		transform: rotate(-10deg);
	}
	50% {
		transform: rotate(10deg);
	}
}

// ----------------------------------------------
// -------- loader-6 ----------------------------
// ----------------------------------------------
.loader-peace-sign { // peace sign loader
	display: inline-block;
	position: relative;
	border-radius: 50%;
	border: .5em solid currentColor;
	top: 30%;
	width: 5em;
	height: 5em;
	color: clr(cp, 2);
	text-align: center;
	background-color: rgba(clr(cp, 3),.75);
	animation: peace $time*2 infinite ease(wtf) alternate,
		boxFill $time*15 infinite ease-out;
	
	&:before,
	&:after {
		content: '';
		position: absolute;
		display: block;
	}
	
	&:before { // |
		top: 0;
		left: 1.8em;
		height: 4.2em;
		width: 0;
		//box-shadow: 0 0 0 .25em currentColor;
		border-left: solid .5em currentColor;
	}
	
	&:after { // L
		height: 2.5em;
		width: 2.5em;
		bottom: -.5em;
		left: .78em;
		transform-origin: center center;
		border: solid currentColor;
		border-width: .5em .5em 0 0;
		transform: rotate(-45deg);
	}
}
// -------- loader-6 keyframes ------------------
@keyframes peace {
	to {
		color: clr(cp, 2);
		transform: scale(1.2) rotate(-10deg);
	}
}

@keyframes boxFill {
	0% {
		box-shadow: 
			inset 0 5em 0 clr(cp, 1),
			0 0 0 clr(cp, 2);
	}
	90%, 93%, 100% {
		box-shadow: 
			inset 0 0 0 clr(cp, 1),
			0 0 0 clr(cp, 2);
	}
	92% {
		box-shadow: 
			inset 0 0 0 clr(cp, 1),
			0 0 2em .5em clr(cp, 2);
	}
}

// ----------------------------------------------
// -------- loader-7 ----------------------------
// ----------------------------------------------
.loader-bubble-disks { // two bubbling circles
	position: relative;
	display: inline-block;
	margin: 0 auto;
	width: 3em;
	height: 3em;
	transform: translateX(-50%);
	
	&:before,
	&:after {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		border-radius: 50%;
		color: rgba(clr(cp, 3), .25);
		background-color: currentColor;
		
		#toggle:checked ~ #sect & { // unnecessary efx
			box-shadow: .1em .1em .1em rgba(clr(s), .25);
		}
		
		animation: scaleCircles $time*2 infinite ease(perpetuum) alternate;
	}
	
	&:after {
		animation-delay: -$time;
	}
}
// -------- loader-7 keyframes ------------------
@keyframes scaleCircles {
	0% {
		z-index: 1;
		// color: rgba(clr(cp, 3), .25);
		transform: scale3d(0,0,0);
	}
	100% {
		z-index: 2;
		// color: rgba(clr(cp, 3), .25);
		transform: scale3d(1,1,1);
	}
}

// ----------------------------------------------
// -------- loader-8 ----------------------------
// ----------------------------------------------
.loader-cycle-disks { // two discs
	position: relative;
	display: inline-block;
	margin: 0 auto;
	width: 4em;
	height: 2em;
	
	#toggle:checked ~ #sect & { // unnecessary efx
		filter: url('#filter-goo2');
	}
	
	&:before,
	&:after {
		content: '';
		left: 0;
		position: absolute;
		width: 2em;
		height: 2em;
		border-radius: 50%;
		background-color: clr(cp, 3);
		// box-shadow: .25em .25em .25em rgba(clr(s), .25);
		animation: movingCircles $time*2 infinite ease-in-out;
	}
	
	&:after {
		animation-delay: -$time;
		background-color: clr(cp, 2);
	}
}
// -------- loader-8 keyframes ------------------
@keyframes movingCircles {
	0% {
		z-index: 1;
		transform: translate(0, 0);
	}
	50% {
		z-index: 1;
		transform: translate(120%, 0);
	}
	50.1% {
		z-index: 0;
		transform: translate(120%, 0);
	}
	100% {
		z-index: 0;
		transform: translate(0, 0);
	}
}

// ----------------------------------------------
// -------- loader-9 ----------------------------
// ----------------------------------------------
.loader-progress-bar { // progress bar mac like
	width: 6em;
	height: 1.5em;
	border-radius: .5em;
	border: .125em solid;
	color: clr(cp, 3);
	
	#toggle:checked ~ #sect & { // unnecessary efx
		filter: drop-shadow(.2em .2em .2em rgba(clr(s), .5));
	}
	
	&:before, &:after {
		content: '';
		top: .2em;
		left: .2em;
		right: .2em;
		bottom: .2em;
		border-radius: .25em;
		display: block;
		position: absolute;
		overflow: hidden;
	}
		
	&:after {
		right: 100%;
		animation: 
			loaderBarInfinite $time*10 infinite linear,
			loaderBarScroll $time*10 infinite linear;
		box-shadow: 
			inset 0 .5em .5em rgba(clr(cp,4), .25),
			inset 0 -.5em .5em rgba(clr(cp,1), .5);
		background-image: repeating-linear-gradient(
		45deg,
		clr(cp, 2) 0px,
		clr(cp, 2) 4px,
		clr(cp, 3) 5px,
		clr(cp, 3) 9px);
		background-size: 26px 13px;
	}
}
// -------- loader-10 keyframes -----------------
@keyframes loaderBarInfinite {
	from {
		background-position: 104px 0;
	}
	to {
		background-position: -104px 0;
	}
}
@keyframes loaderBarScroll {
	to {
		right: 2%;
	}
}

// ----------------------------------------------
// -------- loader-10 ---------------------------
// ----------------------------------------------
.loader-3-bars { // 3 bars loader
	color: clr(cp, 3);
	box-shadow:
		0 0 0 1px currentColor;
	width: .5em;
	height: 2em;
	top: 60%;
	left: 1em;
	border-radius: 2px;
	background-color: clr(cp, 2);
	transform: rotate(180deg);
	transform-origin: center top;
	animation: da3bars $time infinite ease(downhill);

	#toggle:checked ~ #sect & { // unnecessary efx
		filter: drop-shadow(-.15em -.15em .15em rgba(clr(s), .25));
	}
	
	&:before, &:after {
		content: '';
		position: absolute;
		width: .5em;
		height: 2em;
		display: inline-block;
		color: clr(cp, 3);
		box-shadow:
			0 0 0 1px currentColor;
		background-color: clr(cp, 2);		
		border-radius: 2px;
		left: 1em;
		top: 0;
		animation: da3bars $time infinite ease(downhill);
		animation-delay: $time/10;
	}
	
	&:after {
		left: 2em;
		animation-delay: $time/5;
	}
}
// -------- loader-10 keyframes -----------------

@keyframes da3bars {
	0%, 100% {
		height: 2em;
		background-color: clr(cp, 3);		
		// color: clr(cp, 4);		
	}
	75% {
		height: 1em;
		background-color: clr(cp, 2);		
		// color: clr(cp, 3);		
	}
}

// ----------------------------------------------
// -------- loader-11 ---------------------------
// ----------------------------------------------
.loader-radar { // radar loader
	width: 4em;
	height: 4em;
	top: 33%;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid clr(cp, 3);
	z-index: 1;
	background-color: rgba(clr(cp, 2), .2);
	background-image:
		repeating-radial-gradient(
			clr(t) 0,
			clr(t) .39em,
			rgba(clr(cp,2), .5) .45em,
			rgba(clr(cp,2), .5) .5em
		);

	#toggle:checked ~ #sect & { // unnecessary efx
		background-image:
			repeating-radial-gradient(
				clr(t) 0,
				clr(t) .39em,
				rgba(clr(cp,2), .5) .45em,
				rgba(clr(cp,2), .5) .5em
			),
			repeating-radial-gradient(
				clr(t) 0,
				clr(t) .39em,
				rgba(clr(s), .25) .45em,
				rgba(clr(s), .25) .5em
			);
		background-position: 0px 0px, 1px 1px;
			box-shadow: 
				.25em .25em .25em rgba(clr(s), .25),
				inset .25em .25em .25em rgba(clr(s), .25);
	}
	
	&:before, &:after {
		content: '';
		position: absolute;
		display: block;
	}
	
	&:before {
		z-index: 0;
		width: 2.5em;
		height: 2em;
		top: 50%;
		left: 50%;
		transform-origin: left top;
		border-left: .1em solid clr(cp, 4);
		background-image: linear-gradient(
			to right,
			rgba(clr(cp, 2), .75) 0%,
			transparent 85%
		);
		// box-shadow: inset 0 .25em .5em clr(cp, 1);
		animation: radar $time*2 infinite linear;
	}
	
	&:after {
		left: 62%;
		top: 34%;
		width: 2px;
		height: 2px;
		border-radius: 50%;
		background-color: currentColor;
		animation:
			radarDotGlow $time*2 infinite linear,
			radarDotMove $time*15 infinite ease(impetus);
	}
}
// -------- loader-11 keyframes -----------------
@keyframes radar {
	to {
		transform: rotate(359deg);
	}
}

@keyframes radarDotGlow {
	0%, 59.9%, 87%, 100% {
		color: rgba(clr(cp, 4), .33);
		box-shadow: 0 0 .1em .05em currentColor;
	}
	62% {
		color: rgba(clr(cp, 4), 1);
		box-shadow: 0 0 .1em .1em currentColor;
	}
}

@keyframes radarDotMove {
	0% {
		top: 0%;
		left: 85%;
	}
	40% {
		top: 30%;
		left: 70%;
	}
	100% {
		top: 50%;
		left: 50%;
	}
}

// ----------------------------------------------
// -------- loader-12 ---------------------------
// ----------------------------------------------

.loader-beaker { // laboratory glass
	top: 30%;
	width: 2em;
	height: 4em;
	border-radius: 5%;
	border: .15em solid clr(cp, 1);
	overflow: hidden;
	z-index: 1;
	box-shadow: 0 .2em 0 .2em clr(cp, 3);
	
		#toggle:checked ~ #sect & { // unnecessary efx
			// filter: url('#filter-goo2');
			filter: drop-shadow(-.2em .2em .2em rgba(clr(cp, 3), .3)) url('#filter-goo2');
			animation: pour $time*15 infinite ease(liquid);
			
	}

	&:before {
		content: '';
		position: absolute;
		z-index: -1;
		left: -1.5em;
		top: 100%;
		width: 6em;
		height: 6em;
		background-color: rgba(clr(cp, 2), .75);
		border-radius: 66% 100% 100% 66% / 50% 150% 100% 150%;
		animation: 
			waveRot $time*15 infinite ease(liquid);
	}
	
	&:after {
		content: '        100\a            75\a            50\a            25';
		white-space: pre;
		text-align: left;
		font-size: .5em;
		font-weight: bold;
		line-height: 2.3;
		color: clr(cp, 3);
		position: absolute;
		left: 0;
		top: -.8em;
		bottom: 0;
		right: 50%;
		@include mix(12);
		background-image: repeating-linear-gradient(
			to bottom,
			clr(cp, 2) 0,
			clr(cp, 2) 1px,
			clr(t) 2px,			
			clr(t) 9px			
		);
		background-position-y: .9em;
	}
}

@keyframes waveRot {
	to {
		transform: translateY(-70%) rotate(-1440deg);
	}
}
@keyframes waveRot2 {
	to {
		transform: translateY(-65%) rotate(-1080deg);
	}
}
@keyframes pour {
	0%, 90%, 100% {
		transform: rotate(0deg);
	}
	15% {
		transform: rotate(45deg);
	}
}

// ----------------------------------------------
// -------- loader-13 ---------------------------
// ----------------------------------------------

.loader-floppy-disk {
	border: .2em solid clr(cp, 3);
	top: 30%;
	width: 3em;
	height: 3em;
	border-radius: 0 10px 0 0;
	background-image: repeating-linear-gradient(
		to bottom,
		clr(cp, 3) 0,
		clr(cp, 3) 1px,
		clr(t) 2px,
		clr(t) 3px,
		clr(cp, 3) 5px,
		clr(t) 6px
	);
	background-size: 7px 12px;
	background-repeat: no-repeat;
	background-position: 42% 0%;

	#toggle:checked ~ #sect & { // unnecessary efx
		box-shadow: .2em .2em .2em rgba(clr(s), .3);
		// animation: twitch $time linear infinite;
	}

	&:before {
		content: 'HD';
		line-height: 1.4;
		font-weight: 700;
		color: clr(cp, 1);
		position: absolute;
		left: 8%;
		bottom: -.15em;
		width: 80%;
		height: 1.6em;
		border-radius: .1em .1em 0 0;
		background-color: clr(cp, 2);
		border: .2em solid clr(cp, 3);
		transform: rotate(180deg);
		animation: floppyLabel $time*10 infinite linear;
	}
	
	&:after {
		content: '';
		position: absolute;
		left: .65em;
		top: -.1em;
		width: 1.5em;
		height: 1.2em;
		border-radius: .1em .1em 0 0;
		border: .3em solid clr(cp, 3);
		box-shadow: inset .43em 0 0 0 clr(cp, 3);
		animation: floppy $time infinite linear alternate;
	}
}

@keyframes floppy {
	to {
		transform: translateX(-30%);
	}
}

@keyframes floppyLabel {
	from {
		box-shadow: inset 0 0em 0 rgba(clr(cp, 3), .75);
	}
	to {
		box-shadow: inset 0 1.3em 0 rgba(clr(cp, 3), .75);
	}
}
// ----------------------------------------------
// -------- loader-13 ---------------------------
// ----------------------------------------------

.loader-zoom {
	width: 2em;
	height: 2em;

	#toggle:checked ~ #sect & { // unnecessary efx
	// @include mix(7);
		filter: drop-shadow(.2em .2em .2em rgba(clr(s), .3));
	}
	
	&:before, &:after {
		content: '';
		position: absolute;
		width: 2em;
		height: 2em;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		border: 2px solid clr(cp, 3);
		background-color: rgba(clr(cp, 2), .5);
		animation: boxZoom $time*2 infinite ease(overshot) alternate;
	}
	
	&:before {
	}
	
	&:after {
		// animation-delay: $time;
		border-radius: 100%;
		animation-direction: alternate-reverse;
	}
}

@keyframes boxZoom {
	from {
		z-index: 1;
		background-color: rgba(clr(cp, 1), 1);
		transform: /* translate(30%, -30%) */ scale(.5) rotateX(180deg) /* rotateY(0deg) rotateZ(-180deg) */;
	}
	to {
		z-index: 0;
		border-radius: 10%;
		transform: scale(1.5) rotateX(0deg) rotateY(180deg)/*  rotateZ(180deg) */;
	}
}

// ----------------------------------------------
// -------- loader-14 ---------------------------
// ----------------------------------------------

.loader-spinna {
	width: 4em;
	height: 4em;
	top: 25%;
	border-radius: 50%;
	overflow: hidden;
	z-index: 2;
	background-color: rgba(clr(cp, 1), 1);
	
	&:before, &:after {
		content: '';
		position: absolute;
		display: inline-block;
		width: 100%;
		height: 100%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		border-radius: 50%;
		z-index: 1;
	}
	
	&:before {
		border: 3px solid rgba(clr(cp,1), 0);
		box-shadow: inset 0 0 0 3em rgba(clr(cp,1), 1);

		#toggle:checked ~ #sect & { // unnecessary efx
		border: 3px dotted rgba(clr(cp,1), 1);
		}
	}
	
	&:after {
		z-index: 0;
		border-width: 10px;
		border-style: solid;
		border-image: linear-gradient(to bottom, clr(cp, 4) 0%, /* clr(t) 80%, */ clr(t) 100%);
		border-image-slice: 0 0 0 20;
		animation: spinnaRot $time infinite linear;
	}
}

@keyframes spinnaRot {
	to {
		transform: rotate(359deg);
	}
}


// ----------------------------------------------
// -------- loader-15 ---------------------------
// ----------------------------------------------

.loader-pacman {
	// display: none;
	width: 7em;
	height: .75em;
	// border-top: 3px dotted clr(cp, 2);
  background: 
    repeating-radial-gradient(center center, clr(cp, 2), clr(cp, 2) .2em, transparent .2em, transparent 100%);
  background-size: .8em .8em;
	animation:
		pac-dots $time*5 linear infinite;
	
	#toggle:checked ~ #sect & { // unnecessary efx
		filter: drop-shadow(.2em .2em .2em rgba(clr(s), .3));
	}
	
	&:before, &:after {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		top: -.615em;
		width: 1em;
		height: 1em;
		border-radius: 50%;
		border: 1em solid clr(cp, 3);
	}
	
	&:before {
		border-color:  clr(t) clr(cp, 3) clr(cp, 3) clr(t);
		animation: pac-top $time/2 linear infinite alternate;
	}
	
	&:after {
		border-color: clr(cp, 3) clr(t) clr(t) clr(cp, 3);
		top: auto;
		bottom: -.615em;
		animation: pac-bot $time/2 linear infinite alternate;
	}
}
@keyframes pac-dots {
	to {
		background-position: -200% 0;
	}
}
@keyframes pac-move {
	to {
				width: 1em;
	}
}
@keyframes pac-top {
	from {
		transform: rotate(0deg + 45);
	}
	to {
		transform: rotate(60deg + 45);
	}
}
@keyframes pac-bot {
	from {
		transform: rotate(0deg + 45);
	}
	to {
		transform: rotate(-60deg + 45);
	}
}

// ----------------------------------------------
// -------- loader-16 ---------------------------
// ----------------------------------------------

.loader-pulsing {
	border-radius: 50%;
	background-color: currentColor;
	width: 1.5em;
	height: 1.5em;
	color: clr(cp, 2);
	
	#toggle:checked ~ #sect & { // unnecessary efx
		animation: pulseColor $time*3 ease infinite;
	}	
	&:before, &:after {
		content: '';
		position: absolute;
		top: 0;
		color: clr(cp, 2);
		background-color: currentColor;
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 50%;
		transition: all $time;
		animation: pulse $time*3 ease-out infinite;
	}
	
	&:after {
		animation-delay: $time/2.5;
	animation-timing-function: ease(pendulum);
	}
}

@keyframes pulse {
	0% {
		transform: scale(0);
		color: clr(cp, 2);
	}
	75%, 100% {
		transform: scale(4);
		color: clr(t);
	}
}
@keyframes pulseColor {
	50%, 90% {
		color: clr(cp, 2);
	}
	70% {
		color: clr(cp, 3);
	}
}

// ----------------------------------------------
// -------- loader-16 ---------------------------
// ----------------------------------------------
.loader-battery {
	top: 25%;
	width: 2em;
	height: 5em;
	border: .2em solid;
	border-radius: .25em;
	z-index: 1;
	color: clr(cp, 2);
	animation: batteryColor $time*10 linear infinite;
	
	#toggle:checked ~ #sect & { // unnecessary efx
		// transform: rotate(90deg);
		filter: drop-shadow(.3em .3em .3em rgba(clr(s), .3));
	}
	&:before, &:after {
		content: '';
		position: absolute;
		display: inline-block;
	}
	
	&:before {
		@include mix(8);
		content: '+\a\a\a-';
		white-space: pre;
		// position: fixed;
		padding-top: .3em;
		line-height: 1.15;
		font-weight: bold;
		border: .1em solid;
		border-width: .2em 0 0 0;
		width: 1em;
		left: 50%;
		top: -.45em;
		z-index: 4;
		border-radius: .1em .1em 0 0;
		transform: translateX(-50%);
	}
	
	&:after {
		// width: 100%;
		// height: 100%;
		top: .2em;
		left: .2em;
		right: .2em;
		bottom: .2em;
		z-index: 1;
		box-shadow: inset 0 0 0;
		animation: batteryFill $time*10 linear infinite;
	}
}

@keyframes batteryFill {
	to {
		box-shadow: inset 0 -4.5em 0;
	}
}

@keyframes batteryColor {
	96.5% {
		color: clr(cp, 3);
	}
	97%, 99% {
		color: clr(cp, 4);
	}
}

// ------------------------------------
// -----------------------------------

.loader-vinyl {
	width: 4em;
	height: 4em;
	top: 28%;
	z-index: 1;
	border-radius: 50%;
	overflow: hidden;
	border: .2em solid clr(cp, 2);
		background-image:
			repeating-radial-gradient(
				clr(t) 0px,
				clr(t) 1px,
				rgba(clr(cp, 2), .3) 2px,
				rgba(clr(cp, 2), .3) 3px
			);
	background-position: 0 0;
	// animation: grooves $time linear infinite;

	&:before {
		position: absolute;
		content: '';
		top: 0.8em;
    left: -0.65em;
		width: 0;
		height: 0;
		display: block;
    border-width: 1em 2.5em;
		border-style: solid;
    border-color: transparent rgba(clr(cp, 3), .6);
		animation: lightHouseTurn $time*3 linear infinite;
	}
	
	&:after {
		content: '';
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: -.2em;
		border-radius: 50%;
		background-image:
			radial-gradient(
				clr(cp, 1) 0%,
				clr(cp, 2) 7%,
				clr(cp, 2) 25%,
				clr(t) 25.1%
			),
		;
	}
}

@keyframes lightHouseTurn {
	to {
		transform: rotate(359deg);
	}
}

@keyframes grooves {
	from {
		background-image:
			repeating-radial-gradient(
				clr(t) 0px,
				clr(t) 2px,
				clr(cp, 2) 3px,
				clr(cp, 2) 5px
			);
	}
	
	to {
		background-image:
			repeating-radial-gradient(
				clr(cp,2) 0px,
				clr(cp,2) 1px,
				clr(t) 2px,
				clr(t) 4px,
				clr(cp,2) 5px,
				clr(cp,2) 6px
			);
	}
}
// ----------------------------------------------
// -------- loader-18 ---------------------------
// ----------------------------------------------

td[data-3d] {
	perspective: 600px;
		#toggle:checked ~ #sect & { // unnecessary efx
			filter: drop-shadow(.2em .2em .2em rgba(clr(s), .2));
	}
}

.loader-triangle {
	width: 4em;
	height: 1.5em;
	line-height: 1.5;
	color: clr(cp, 4);
	background-color: clr(cp, 2);
	// transform: rotateY(80deg);
	transform-style: preserve-3d;
	transform-origin: center center -1.15em;
	animation:
		triRot $time*3 linear infinite reverse,
		reflex $time*3 linear infinite reverse;

	&:before, &:after, & {
		background-size: 12em 2em;
		
		#toggle:checked ~ #sect & { // unnecessary efx
			text-shadow: 2px 2px 2px rgba(clr(s), .5);
			background-image: repeating-linear-gradient(
					to right,
					rgba(clr(s), .15) 0em,
					rgba(clr(s), .15) 3em,
					clr(t) 4.5em,
					clr(t) 7.5em,
					rgba(clr(w), .05) 9em,
					rgba(clr(w), .05) 13em
				);
		}
	}
	
	&:before, &:after {
		// backface-visibility: hidden;
		background-color: clr(cp, 2);
		position: absolute;
		width: 4em;
		height: 1.5em;
		top: 0;
		animation:
			reflex $time*3 linear infinite reverse;
		}
	
	&:before {
		content: 'wait…';
		left: -100%;
		transform-origin: right center;
		transform: rotateY(-121deg);
		animation-delay: -$time;
	}
	
	&:after {
		content: 'please';
		right: -100%;
		transform-origin: left center;
		transform: rotateY(120deg);
		animation-delay: -$time*2;
	}
}

// @keyframes triRot {
// 	0%, 2.9% {
// 		transform: rotateY(0deg);
// 	}
// 	30.3%, 36.3% {
// 		transform: rotateY(120deg);
// 	}
// 	63.6%, 69.6% {
// 		transform: rotateY(240deg);
// 	}
// 	96.9%, 100% {
// 		transform: rotateY(360deg);
// 	}
// }
@keyframes triRot {
	0%{
		transform: rotateY(0deg);
	}
	33.3% {
		transform: rotateY(120deg);
	}
	66.6% {
		transform: rotateY(240deg);
	}
	100% {
		transform: rotateY(360deg);
	}
}

@keyframes reflex {
	0% {
		background-position-x: -4em;
	}
	100% {
		background-position-x: -16em;
	}
}

// -------------------------------------
// -------------------------------------
// -------------------------------------
td[data-3d] {
	perspective: 600px;
}

.loader-road {
	z-index: 1;
	width: 4em;
	height: 28em;
	border-style: solid;
	border-width: 0 .2em;
	color: clr(cp, 3);
	background-color: rgba(clr(cp, 2), .2);
	transform-style: preserve-3d;
	transform: rotateX(87deg);
	transform-origin: center top;
	
	&:before, &:after {
		content: '';
		position: absolute;
	}
	
	&:before {
		content: '--------';
		white-space: pre;
		line-height: .5;
		width: .2em;
		left: 1.8em;
		z-index: 0;
		top: 0;
		bottom: 0;
		text-indent: -1.75em;
		font-weight: bold;
		background-image: repeating-linear-gradient(
			to bottom,
			clr(cp, 3) 0em,
			clr(cp, 3) 2em,
			clr(t) 2.01em,
			clr(t) 4em
		);
		background-size: 2em 4em;
		background-position: 0 0;
		animation: 
			middleTrack $time linear infinite,
			middleTrackText $time*8 linear infinite,
			;
	}
	
	&:after {
		font-size: .5em;
		content: 'loading';
		line-height: 1.2;
		border: .2em solid clr(cp, 3);
		color: clr(cp, 4);
		border-width: .2em .2em 0;
		height: 3.75em;
		z-index: 2;
		top: 0; //27em;
		left: -.2em;
		right: -.2em;
		border-radius: 1em 1em 0 0;
		box-shadow: 
			inset 0 1em 0 rgba(clr(cp, 1), .5),
			inset 0 1.2em 0 clr(cp, 3),
			;
		transform-origin: center bottom;
		transform: rotateX(-87deg) translateZ(-1px);
		animation: highwaySign $time*5 linear infinite;
	}
}

@keyframes middleTrackText {
	0%, 50.1%, 100% {
		padding-top: 0;
	}
	50% {
		padding-top: 27em;
	}
}

@keyframes middleTrack {
	to {
		background-position: 0 8em;
	}
}

@keyframes highwaySign {
	0% {
		transform: rotateX(-87deg) translateZ(0) translateY(0em);
		opacity: 0;
		filter: blur(.25em);
	}
	10% {
		opacity: 1;
		filter: blur(.1em);
	}
	80% {
		transform: rotateX(-87deg) translateZ(53em) translateY(2.7em);
		opacity: 1;
		filter: blur(0em);
	}
	81% {
		opacity: 0;
		transform: rotateX(-87deg) translateZ(53.1em) translateY(2.7em);
	}
	100% {
		opacity: 0;
		transform: rotateX(-87deg) translateZ(0em) translateY(0em);
	}
}

// -------------------------------------
// -------------------------------------
// -------------------------------------

.loader-wheel {
	width: 5em;
	height: 5em;
	border-radius: 50%;
	border: .2em solid;
	color: clr(cp, 2);
	background-color: rgba(clr(cp, 2), .2);
	
	#toggle:checked ~ #sect & { // unnecessary efx
		animation: rollTheWheel $time*4 ease(downhill) infinite alternate;
		box-shadow: 0 0 .5em .2em rgba(clr(s), .25);
	}
	
	@keyframes rollTheWheel {
		from {
			transform: translateX(-100%) rotate(0deg);
		}
		to {
			transform: translateX(100%) rotate(359deg);
		}
	}

	&:before,
	&:after {
		content: '';
		position: absolute;
		border-radius: 50%;
		border-width: .2em;
	}
	
	&:before {
		width: 4em;
		height: 4em;
		left: .3em;
		top: .3em;
		border-style: dotted;
	}
	
	&:after {
		width: 3em;
		height: 3em;
		border-style: solid;
		left: .8em;
		top: .8em;
		background-color: clr(cp, 1);
		background-image:
			radial-gradient(
				clr(cp,1) 0,
				clr(cp,2) 1px,
				clr(cp,3) 2px,
				clr(cp,2) 4px,
				clr(t) 		5px
			);
		background-repeat: no-repeat;
	}
}


// -------------------------------------
// -------------------------------------
// -------------------------------------

.loader-disc-bouncer {
	width: 5em;
	height: 5em;
	border-radius: 50%;
	background-color: clr(cp, 2);
	z-index: 0;
	
	&:before,
	&:after {
		content: '';
		position: absolute;
		border-radius: 50%;
	}

		&,
		&:before,
		&:after {
			box-shadow: 0 0 .75em  rgba(clr(s), .5);
		}
	
	&:before {
		width: 3em;
		height: 3em;
		left: 1em;
		top: 1em;
		z-index: 1;
		background-color: clr(cp,3);
			animation: bounce-disks $time infinite alternate ease(downhill);
	}
	
	&:after {
		width: 1em;
		height: 1em;
		left: 2em;
		top: 2em;
		background-color: clr(cp,4);
		z-index: 2;
			animation: bounce-disks2 $time $time/2 infinite alternate ease(downhill);
	}
}

@keyframes bounce-disks {
	to {
		transform: scale(1.5);
	}
}
@keyframes bounce-disks2 {
	to {
		transform: scale(2);
	}
}

// -------------------------------------
// -------------------------------------
// -------------------------------------

.loader-butterfly {
	font-size: 2em;
	width: 2em;
	height: 2em;
	transform: rotateZ(-13deg);
	animation: insect-fly $time/3 infinite alternate ease(swing);
	
	&:before, 
	&:after {
		content: '';
		position: absolute;
		width: 1em;
		height: 1.5em;
		border: 1px solid clr(cp, 3);
		background-color: rgba(clr(cp, 2), .5);
		animation: wings $time/3 infinite ease(full-circle) alternate;
	}
	
	&:before {
		left: 0;
		border-radius: 40% 20% 50% 50%;
		transform-origin: right center;
	}
	
	&:after {
		right: 0;
		border-radius: 20% 40% 50% 50%;
		transform-origin: left center;
		animation-direction: alternate-reverse;
	}
	
	@keyframes wings {
		from {
				transform: rotateX(60deg) rotateY(-60deg);
		}
		to {
				transform: rotateX(60deg) rotateY(60deg);
		}
	}
	
	@keyframes insect-fly {
		from {
			margin-top: -.3em;
		}
		to {
			margin-top: .3em;
		}
	}
}

// -------------------------------------
// -------------------------------------
// -------------------------------------
.loader-blow-up {
	width: 3em;
	height: 3em;
	position: relative;
	z-index: 2;
	// filter: url("#filter-goo2");
	
	&:before {
		content: '';
		display: block;
		position: absolute;
		left: .75em;
		top: .75em;
		border-radius: 50%;
		background-color: clr(cp, 2);
		width: 1.5em;
		height: 1.5em;
		z-index: 1;
		animation: blow-grow $time*4 infinite ease(swing);
	}
	
	&:after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 1rem;
		height: 1rem;
		z-index: 0;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		animation: 
			blow-fade-in $time infinite ease(swing),
			blow-shadow $time infinite ease(swing);
	}
		
	@keyframes blow-fade-in {
		0% {
			opacity: 0;
		}
		2%, 100% {
			opacity: 1;
		}
	}
	
	@keyframes blow-shadow {
		0% {
			box-shadow: 
				-4em 0 0 clr(cp, 2),
				4em 0 0 clr(cp, 2);
		}
		75%, 100% {
			box-shadow: 
				0 0 0 clr(cp, 2),
				0 0 0 clr(cp, 2);
		}
	}

	@keyframes blow-grow {
		0% {
			transform: scale(0);
			background-color: clr(cp, 2);
		}
		25% {
			transform: scale(.5);
			background-color: clr(cp, 2);
		}
		50% {
			transform: scale(1);
			background-color: clr(cp, 3);
		}
		75% {
			transform: scale(1.5);
			background-color: clr(cp, 3);
		}
		100% {
			transform: scale(2);
			background-color: clr(cp, 4);
		}
	}
}
// ease():
// default, in-cubic, out-cubic, in-out-cubic, in-circ, out-circ, in-out-circ, in-expo, out-expo", in-out-expo, in-quad, out-quad, in-out-quad, in-quart, out-quart, in-out-quart, in-quint, out-quint, in-out-quint, in-sine, out-sine, in-out-sine, in-back, out-back, in-out-back, liquid, bounce, in-out-bounce, perpetuum, impetus, full-circle, gravity, overshot, downhill, pendulum, wtf, swing
@keyframes twitch {
  0% {
    filter: url("#turbulence-1");
  }
  25% {
    filter: url("#turbulence-2");
  }
  50% {
    filter: url("#turbulence-3");
  }
  75% {
    filter: url("#turbulence-4");
  }
  100% {
    filter: url("#turbulence-5");
  }
}

// ###############################################
// ########### defaults for layout ###############
// ###############################################
// --------- defaults ---------
* {
	&:focus {
		outline: 0;
	}
	
	&, &:before, &:after {
		box-sizing: border-box;
	}
}
// --------------------
html {
	background-color: clr(s);
	font-size: 10px;
	
	body {
		font-size: $fz;
		font-family: $f;
		color: clr(w);
		// font-size: 1em;
		overflow-x: hidden;
		background-color: clr(cp, 1);
	}
	
	&, body {
		// position: absolute;
		// left: 0;
		// right: 0;
		// top: 0;
		// bottom: 0;
		float: left;
		width: 100vw;
		min-height: 100vh;
		// overflow: auto;
	}
}

.hide,
#toggle,
#toggleSize {
	display: none;
}

#sect	{
	width: 80vw;
	margin: 3vh auto 0;
	
	#toggleSize:checked {
		+ #list tbody {
			font-size: 1.5em;
		}
	}
	
	h3 {
		font-weight: 700;
	}
	
	h4 {
		margin-top: .25em;
		display: inline-block;
		vertical-align: middle;
		
		&:not(:first-of-type) {
			margin-left: 1em;
		}
		
		label {
			display: inline-block;
			transition: all $time/3;
			
			&:hover {
				color: clr(w);
			}
		}
	}
	
	.ckbx {
		position: relative;
		display: inline-block;
		font-size: .5em;
		padding-left: 1.5em;
		cursor: pointer;
		vertical-align: top;
		line-height: 1.3;
		
		.small {
			font-size: .7em;
			display: block;
			line-height: 1.5;
			text-align: left;
		}
		
		&:before {
			content: '';
			position: absolute;
			display: inline-block;
			left: 0;
			top: 0.2em;
			width: 1em;
			height: 1em;
			border: 2px solid clr(cp, 2);
			border-radius: .2em;
			margin-right: .5em;
		}
		
		&:after {
			content: '';
			display: inline-block;
			position: absolute;
			left: .4em;
			top: 0.7em;
			width: 0;
			height: 0;
			opacity: 0;
			border: 5px solid clr(cp, 4);
			border-width: 0 5px 5px 0;
			transform: rotate(35deg);
			transition: all $time/3;
		}
	}
	
	table {
		width: 100%;
		margin: 0 auto;
		margin-top: 8em;
		
		caption {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 100;
			background-color: clr(cp, 1);
			box-shadow: 0 .5em .5em clr(cp, 1);
			width: 100vw;
			font-size: 2em;
			color: clr(gr);
			padding-top: .5em;
			padding-bottom: .5em;
			border-bottom: 1px solid;
			margin-bottom: .5em;
		}
		
		tr {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: space-between;
			align-items: stretch;
		}
		
		td {
			// border: 1px solid;
			// padding: 3em;
			flex: 1 2 47%;
			text-align: center;
			vertical-align: middle;
			position: relative;
			max-width: 15em;
			width: 100%;
			min-width: 10em;
			min-width: 25vh;
			text-align: center;
			height: 20vh;
			min-height: 10em;
			margin: .5em;
			order: 2;
			border-radius: .5em;
			transform-origin: center 33%;
			transition: all $time/3;
			
			h2 {
				position: absolute;
				top: .25em;
				left: 0;
				right: 0;
				display: block;
				font-size: .8em;
				text-align: center;
				color: rgba(clr(gr), .5);
				transition: all $time/3;
			}
			
			&:hover {
				background-color: rgba(clr(cp, 2), .2);
				box-shadow: .2em .2em .2em rgba(clr(s), .2);
				transform: scale(1.2);
				
				h2 {
					font-size: 1em;
					color: clr(w);
				}
			}
			
			&.prio {
				order: 0;
				// font-size: 2em;
			}
			
			&:not(.prio) {
				// display: none;
			}

		}
	}
}

#toggle:checked ~ #sect .ckbx.one:after,
#toggleSize:checked ~ #list .ckbx.two:after {
	opacity: 1;
	width: .6em;
	left: .2em;
	top: 0em;
	height: 1.2em;
}




 @media (min-width: 769px) {
	 html body {
		 #sect {
		 font-size: 1em;
		 
			 #list {
				 td {
					 max-width: 10em;
				 }
			 }
		 }
	 }
  }
 @media (max-width: 769px) {
	 html body {
		 
		 #sect {
			 font-size: 1.4em;
			 width: 100vw;

			 td {
				 max-width:31vmax;
			 }
			 
				#toggleSize:checked {
					+ #list tbody {
						font-size: 1.75em;

					 td {
						 max-width: 100%;
					 }
					}
			 }
		 }
	 }
}
 @media (max-width: 360px) {
	 html body {
		 #sect {
				 #list {
					 font-size: 1.3em;
					 
					 td {
						 max-width: 100%;
					 }
				 }
			 }
		 }
  }

            
          
!
            
              // ######################
// # look mommy, no JS! #
// ######################
// ----------------------
// © iGadget.de
// twitter @escapewarrior 
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console