Jumping Worm Preloader

index.html

<svg class="pl" width="240" height="240" viewBox="0 0 240 240">
	<circle class="pl__ring pl__ring--a" cx="120" cy="120" r="105" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 660" stroke-dashoffset="-330" stroke-linecap="round" />
	<circle class="pl__ring pl__ring--b" cx="120" cy="120" r="35" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 220" stroke-dashoffset="-110" stroke-linecap="round" />
	<circle class="pl__ring pl__ring--c" cx="85" cy="120" r="70" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 440" stroke-linecap="round" />
	<circle class="pl__ring pl__ring--d" cx="155" cy="120" r="70" fill="none" stroke="#000" stroke-width="20" stroke-dasharray="0 440" stroke-linecap="round" />
</svg>

jumping-worm-preloader.markdown

Jumping Worm Preloader

An SVG preloader similar to the third one in this Dribbble shot.

A Pen by Jon Kantner on CodePen.

License.

style.sass

*
	border: 0
	box-sizing: border-box
	margin: 0
	padding: 0
\:root
	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320))
body
	background: hsl(223,10%,90%)
	display: grid
	font: 1em/1.5 sans-serif
	place-items: center
	height: 100vh
.pl
	width: 6em
	height: 6em
	&__ring
		$dur: 2s
		animation: ringA $dur linear infinite
		&--a
			stroke: hsl(3,90%,55%)
		&--b
			animation-name: ringB
			stroke: hsl(33,90%,55%)
		&--c
			animation-name: ringC
			stroke: hsl(223,90%,55%)
		&--d
			animation-name: ringD
			stroke: hsl(333,90%,55%)

/* Dark theme */
@media (prefers-color-scheme: dark)
	body
		background: hsl(223,10%,10%)

/* Animations */
@keyframes ringA
	from, 4%
		stroke:
			dasharray: 0 660
			width: 20
			dashoffset: -330
	12%
		stroke:
			dasharray: 60 600
			width: 30
			dashoffset: -335
	32%
		stroke:
			dasharray: 60 600
			width: 30
			dashoffset: -595
	40%, 54%
		stroke:
			dasharray: 0 660
			width: 20
			dashoffset: -660
	62%
		stroke:
			dasharray: 60 600
			width: 30
			dashoffset: -665
	82%
		stroke:
			dasharray: 60 600
			width: 30
			dashoffset: -925
	90%, to
		stroke:
			dasharray: 0 660
			width: 20
			dashoffset: -990

@keyframes ringB
	from, 12%
		stroke:
			dasharray: 0 220
			width: 20
			dashoffset: -110
	20%
		stroke:
			dasharray: 20 200
			width: 30
			dashoffset: -115
	40%
		stroke:
			dasharray: 20 200
			width: 30
			dashoffset: -195
	48%, 62%
		stroke:
			dasharray: 0 220
			width: 20
			dashoffset: -220
	70%
		stroke:
			dasharray: 20 200
			width: 30
			dashoffset: -225
	90%
		stroke:
			dasharray: 20 200
			width: 30
			dashoffset: -305
	98%, to
		stroke:
			dasharray: 0 220
			width: 20
			dashoffset: -330

@keyframes ringC
	from
		stroke:
			dasharray: 0 440
			width: 20
			dashoffset: 0
	8%
		stroke:
			dasharray: 40 400
			width: 30
			dashoffset: -5
	28%
		stroke:
			dasharray: 40 400
			width: 30
			dashoffset: -175
	36%, 58%
		stroke:
			dasharray: 0 440
			width: 20
			dashoffset: -220
	66%
		stroke:
			dasharray: 40 400
			width: 30
			dashoffset: -225
	86%
		stroke:
			dasharray: 40 400
			width: 30
			dashoffset: -395
	94%, to
		stroke:
			dasharray: 0 440
			width: 20
			dashoffset: -440

@keyframes ringD
	from, 8%
		stroke:
			dasharray: 0 440
			width: 20
			dashoffset: 0
	16%
		stroke:
			dasharray: 40 400
			width: 30
			dashoffset: -5
	36%
		stroke:
			dasharray: 40 400
			width: 30
			dashoffset: -175
	44%, 50%
		stroke:
			dasharray: 0 440
			width: 20
			dashoffset: -220
	58%
		stroke:
			dasharray: 40 400
			width: 30
			dashoffset: -225
	78%
		stroke:
			dasharray: 40 400
			width: 30
			dashoffset: -395
	86%, to
		stroke:
			dasharray: 0 440
			width: 20
			dashoffset: -440