<main>
	<div class="preloader">
		<div class="preloader__stripe"></div>
		<div class="preloader__stripe"></div>
		<div class="preloader__stripe"></div>
		<div class="preloader__stripe"></div>
		<div class="preloader__stripe"></div>
		<div class="preloader__stripe"></div>
		<div class="preloader__stripe"></div>
		<div class="preloader__stripe"></div>
	</div>
	<div class="status">
		Loading<span class="status__dot">.</span><span class="status__dot">.</span><span class="status__dot">.</span>
	</div>
</main>
$palette: #0d4ef2 #ffffff

*
	border: 0
	box-sizing: border-box
	margin: 0
	padding: 0
\:root
	--dotDur: 1s
	font-size: calc(20px + 10 * (100vw - 320px) / (1280 - 320))
body
	background:
		color: #d4f4fb
		image: linear-gradient(#81dcf6,#d4f4fb)
		repeat: no-repeat
	display: flex
	font: 1em/1.5 Lobster, sans-serif
	height: 100vh
	overflow-x: hidden
main
	margin: auto
.preloader
	animation: spinCCW var(--dotDur) linear infinite
	margin-bottom: 1.5em
	position: relative
	width: 9em
	height: 9em
	&, &:before, &:after, &__stripe
		border-radius: 50%
	&:before, &:after, &__stripe
		position: absolute
	&:before, &:after
		animation: spinCW var(--dotDur) linear infinite
		content: ""
		display: block
		top: 0
		left: 0
		width: 100%
		height: 100%
	// ring shine
	&:before
		background: radial-gradient(25% 6% at 50% 7.5%,#fff 12.5%,rgba(255,255,255,0) 50%), radial-gradient(25% 6% at 50% 92.5%,#fff 12.5%,rgba(255,255,255,0) 50%), radial-gradient(100% 100% at center,rgba(0,0,0,0) 34%,rgba(0,0,0,0.3) 34%,rgba(0,0,0,0) 38% 46%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0) 50%)
		z-index: 2
	// drop shadow
	&:after
		box-shadow: 0.5em 0.5em 0.25em 0 rgba(0,0,0,0.25), 0.5em 0.5em 0.25em 1.5em rgba(0,0,0,0.25) inset
	&__stripe
		box-shadow: 0.25em 0.5em 0 inset
		color: nth($palette,1)
		top: 50%
		left: 50%
		width: 7.5em
		height: 7.5em
		transform: translate(-50%,-50%) translateX(-0.75em)
		z-index: 1
		@for $s from 2 through length($palette)
			&:nth-of-type(#{length($palette) + n} + #{$s - 1})
				color: nth($palette,$s)
		@for $s from 2 through 8
			&:nth-of-type(#{$s})
				transform: translate(-50%,-50%) rotate(45deg * ($s - 1)) translateX(-0.75em)
.status
	$textShadow: #010818
	$textShadowT: 2px
	color: #ffffff
	text-align: center
	text-shadow: (-$textShadowT) (-$textShadowT) 0 $textShadow, 0 (-$textShadowT) 0 $textShadow, $textShadowT (-$textShadowT) 0 $textShadow, $textShadowT 0 0 $textShadow, $textShadowT $textShadowT 0 $textShadow, 0 $textShadowT 0 $textShadow, (-$textShadowT) $textShadowT 0 $textShadow, (-$textShadowT) 0 0 $textShadow
	&__dot
		animation: appear1 var(--dotDur) steps(1,start) infinite
		display: inline-block
		&:nth-child(2)
			animation-name: appear2
		&:nth-child(3)
			animation-name: appear3
// Aniamtions
@keyframes spinCW
	to
		transform: rotate(45deg * length($palette))
@keyframes spinCCW
	to
		transform: rotate(-45deg * length($palette))
@keyframes appear1
	from
		visibility: hidden
	33%, to
		visibility: visible
@keyframes appear2
	from, 33%
		visibility: hidden
	67%, to
		visibility: visible
@keyframes appear3
	from, 67%
		visibility: hidden
	to
		visibility: visible
View Compiled

External CSS

  1. https://fonts.googleapis.com/css2?family=Lobster&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.