Loading Worm

loading-worm.sass

.loading
	display: block
	position: fixed
	top: 50%
	left: 50%
	transform: translate(-50%, -50%)
	display: flex
	align-items: center
	justify-content: center
	width: 100%
	height: 100%
	background: #fff
	opacity: 1
	&.hide
		// background: #daf
		animation: .3s fadeout linear
		opacity: 0
	&.hidden
		display: none

	& > div
		content: ''
		display: block
		width: 0.5rem
		height: 0.5rem
		top: 50%
		left: 50%
		background: #daf
		border-radius: 100% 100%
		transform: translateY(0%)
		margin: 0 0.05rem
		animation: 1.4s loadingWave linear infinite, 10s loadingColor linear infinite

		&:nth-child(1)
			animation-delay: 0s
		&:nth-child(2)
			animation-delay: -0.1s
		&:nth-child(3)
			animation-delay: -0.2s
		&:nth-child(4)
			animation-delay: -0.3s
		&:nth-child(5)
			animation-delay: -0.4s
		&:nth-child(6)
			animation-delay: -0.5s
		&:nth-child(7)
			animation-delay: -0.6s
		
		&:last-child
			// width: 0.7rem
			// height: 0.7rem
			&:after, &:before
				content: ''
				width: 0.1rem
				height: 0.1rem
				background: #000
				position: absolute
				border: 1px #fff solid
				display: block
				box-sizing: content-box
				top: 20%
				left: 20%
				border-radius: 100% 100%
			&:after
				left: 60%

			& > div
				font-size: 0.2rem
				font-weight: 700
				position: absolute
				bottom: 0%
				width: 3px
				border: 1px transparent solid
				border-top: 1px #000 solid
				border-radius: 10px
				left: 40%

@keyframes loadingWave
	0%
		transform: translateY(-50%) translateX(0%)
	25%
		transform: translateY(-150%) translateX(0%)
	50%
		transform: translateY(-0%) translateX(0%)
	75%
		transform: translateY(100%) translateX(0%)
	100%
		transform: translateY(-50%) translateX(0%)

@keyframes loadingColor
	0%
		background: crimson
	10%
		background: hotpink
	20%
		background: royalblue
	30%
		background: lime
	40%
		background: gold
	50%
		background: purple
	60%
		background: grey
	70%
		background: silver
	80%
		background: teal
	90%
		background: royalblue
	100%
		background: crimson

.offloading
	position: fixed
	top: 1rem
	left: 1rem


@keyframes fadeout
	from
		opacity: 1

	100%
		opacity: 0