Quick loader with CSS transforms, vars & Houdini magic

Quick loader_index.pug

- var n = 128, ha = Math.PI/n;

style 
	| :root {
	| 	--n: #{n};
	| 	--f: #{Math.tan(ha)}
	| }
while n--
	.spike(style=`--i: ${n}`)

quick-loader-with-css-transforms-vars-houdini-magic.markdown

Quick loader with CSS transforms, vars & Houdini magic

Uses Houdini to animate the scaling factor --sx of the bars, so it only works in Chrome with the Experimental Web Platform features flag enabled. Recording of how the animation looks.

Inspiration.

---

Demo mentioned in my Various Methods for Expanding a Box While Preserving the Border Radius article on CSS-Tricks.

---

Dedicated to the memory of someone special who passed away this January. Missing you every day.

A Pen by Monika on CodePen.

License.

script.babel

CSS.registerProperty({
	name: '--fx', 
	syntax: '<number>', 
	initialValue: 1, 
	inherits: true
})

style.scss

@import 'compass/css3';

$p: 3;
$h: .25em;
$w: 4em;
$t: 9s;
$min: .1;
$dif: 1 - $min;
$amp: .5*$dif;
$mid: $min + $amp;
$m: 36;
$ua: 360deg/$m;

html { overflow: hidden }

body { background: #000 }

.spike {
	--fx: calc(var(--i)/var(--n));
	position: absolute;
	top: calc(50% - #{.5*$h}); left: 50%;
	width: $w; height: $h;
	transform-origin: 0 50%;
	transform: rotate(calc(var(--i)*1turn/var(--n)))
		translate(calc(#{$h}/var(--f))) scalex(var(--fx));
	background: currentcolor;
	color: HSL(calc(var(--i)*#{$p}*360/var(--n)), 100%, 75%);
	animation: a $t ease-in-out calc(var(--i)/var(--n)*#{-2*$t}) infinite;
	
	&:before, &:after {
		--k: 0;
		--s: calc(2*var(--k) - 1);
		position: absolute;
		top: calc(50% - #{.5*$h});
		left: calc(var(--k)*100% - #{.5*$h});
		width: $h; height: $h;
		border-radius: 50%;
		transform: scalex(calc(1/var(--fx)));
		background: inherit;
		content: ''
	}
	
	&:after { --k: 1 }
	
	&:nth-child(2n) {
		&:before, &:after {
			box-shadow: calc(var(--s)*#{2*$h}) 0 0 -1px currentcolor;
		}
	}
}

@keyframes a {
	@for $i from 0 through $m {
		#{$i*100%/$m} { --fx: #{$mid + 2*$amp*sin($i*2*$ua)*sin($i*3*$ua)*sin($i*5*$ua)*sin($i*7*$ua)} }
	}
}