JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="animsition-loading">
</div>

CSS

.animsition-loading{
	background: none !important;
}
.animsition-loading:after{
	display: none !important;
}

.animsition-loading:before {
	content: "";
	display: block;
	position: absolute;
	width: 40px;
	height: 40px;
	left: 50%; top: 50%;
	margin-left: -20px; margin-right: -20px;
	background-color: #333;

	border-radius: 100%;  
	-webkit-animation: scaleout 1.0s infinite ease-in-out;
	animation: scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes scaleout {
	0% { -webkit-transform: scale(0.0) }
	100% {
		-webkit-transform: scale(1.0);
		opacity: 0;
	}
}

@keyframes scaleout {
	0% { 
		transform: scale(0.0);
		-webkit-transform: scale(0.0);
	}
	100% {
		transform: scale(1.0);
		-webkit-transform: scale(1.0);
		opacity: 0;
	}
}


body  {
  background : #ccc;
  }
  
}