JSFiddle - React, Tailwind, and code Playground

by wang eded

HTML

<div class="page-loading"><i></i><i></i><i></i></div><!-- end page-loading -->

SCSS

%clearfix{
	&:after{
		clear:both;
		content:"";
		display:table;
	}
}

.page-loading{
	
	@extend %clearfix;
	display:block;
	font-size:1.6rem;
	left:50%;
	position:absolute;
	top:50%;
	transform:translate(-50%,-50%);
	z-index:20;
	
	i{
		display:inline-block;
		vertical-align:middle;
		margin-right:.2em;
		&:before, &:after{
			animation:page-loading .6s linear infinite;
			background-color:#FFF;
			content:"";
			display:block;
			height:1em;
			width:1em;
		}
		&:before{
			margin-bottom:.2em;
		}
		&:nth-child(1){
			&:before{ border-radius:0 1em 0 0; }
			&:after{ border-radius:0 0 0 1em; }
		}
		&:nth-child(2){
			&:before, &:after{
				animation-delay:.2s;
			}
			&:before{ border-radius:1em 0 0 0; }
			&:after{ border-radius:0 0 0 1em; }
		}
		&:nth-child(3){
			margin-right:0;
			&:before, &:after{
				animation-delay:.4s;
			}
			&:before{ border-radius:0 1em 0 0; }
			&:after{ border-radius:0 0 1em 0; }
		}
		@at-root{
			@keyframes page-loading{ to{ background-color:$linkColor; } }
		}
	}
	
}