Ribbon Preloader

index.html

<div class="pl"></div>

ribbon-preloader.markdown

Ribbon Preloader

A C-shaped preloader based on Colorline Logo Design Direction by Outer Studio on Dribbble.

A Pen by substance on CodePen.

License.

style.css

* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--bg: hsl(var(--hue),10%,90%);
	--fg: hsl(var(--hue),10%,10%);
	--primary: hsl(var(--hue),90%,55%);
	--trans-dur: 0.3s;
	--pl-dur: 2.6s;
	font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
	background-color: var(--bg);
	color: var(--fg);
	font: 1em/1.5 sans-serif;
	height: 100vh;
	display: grid;
	place-items: center;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}

.pl {
	position: relative;
	width: 9em;
	height: 12em;
}
.pl:before,
.pl:after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	width: inherit;
	height: 12em;
}
.pl:before {
	animation:
		top calc(var(--pl-dur) / 2) linear infinite,
		flipZ var(--pl-dur) steps(1) infinite;
	border-radius: 4.5em 0 0 0 / 4em 0 0 0;
	box-shadow: 0 4em 0 0 inset;
	top: 0;
}
.pl:after {
	animation: bottom calc(var(--pl-dur) / 2) linear infinite;
	animation-delay: calc(var(--pl-dur) * -0.25);
	border-radius: 0 0 0 4.5em / 0 0 0 4em;
	box-shadow: 0 -4em 0 0 var(--primary) inset;
	bottom: 0;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),10%,10%);
		--fg: hsl(var(--hue),10%,90%);
	}
}

/* Animations */
@keyframes top {
	from {
		animation-timing-function: ease-in;
		clip-path: polygon(0 0, 123% 0, 123% 70%, 123% 70%, 123% 0, 123% 0, 123% 100%, 0 100%);
	}
	50% {
		animation-timing-function: ease-out;
		clip-path: polygon(0 0, 0 0, 0 70%, 77% 70%, 77% 0, 100% 0, 100% 100%, 0 100%);
	}
	to {
		clip-path: polygon(0 0, 0 0, 0 70%, 0 70%, 0 0, 100% 0, 100% 100%, 0 100%);
	}
}
@keyframes bottom {
	from {
		animation-timing-function: ease-in;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 30%, 0 30%, 0 100%, 0 100%);
	}
	50% {
		animation-timing-function: ease-out;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 77% 100%, 77% 30%, 0 30%, 0 100%, 0 100%);
	}
	to {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 123% 100%, 123% 30%, 100% 30%, 100% 100%, 0 100%);
	}
}
@keyframes flipZ {
	from {
		z-index: 0;
	}
	50%,
	to {
		z-index: 1;
	}
}