JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<button>Add content</button>
<div class="demo"></div>

CSS

/* 
Animated skeleton screen using CSS.

Create shapes using gradients that simulate solids.

Use `:empty` pseduo-class to show skeleton screen background only while container has no content (ex: for the "loading" state). When content is added to the container element, the pseudo-class selector won't match anymore and the skeleton screen will be removed automatically; no need to toggle a separate class on the container.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Animating one layer of the background which is a tilted linear gradient with white in the middle to achieve shine effect.
*/
	.demo:empty {
    margin: auto;
		width: 500px;
		height: 600px; /* change height to see repeat-y behavior */
    
		background-image:
			radial-gradient( circle 50px at 50px 50px, lightgray 99%, transparent 0 ),
			linear-gradient( 100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80% ),
			linear-gradient( lightgray 20px, transparent 0 ),
			linear-gradient( lightgray 20px, transparent 0 ),
			linear-gradient( lightgray 20px, transparent 0 ),
			linear-gradient( lightgray 20px, transparent 0 );

		background-repeat: repeat-y;

		background-size:
			100px 200px, /* circle */
			50px 200px, /* highlight */
			150px 200px,
			350px 200px,
			300px 200px,
			250px 200px;

		background-position:
			0 0, /* circle */
			0 0, /* highlight */
			120px 0,
			120px 40px,
			120px 80px,
			120px 120px;

		animation: shine 1s infinite;
	}

	@keyframes shine {
		to {
			background-position:
				0 0,
				100% 0, /* move highlight to right */
				120px 0,
				120px 40px,
				120px 80px,
				120px 120px;
		}
	}

JavaScript

// As soon as content is added to the skeleton screen container, the `:empty` pseudo-class won't match anymore and the background will be automatically removed.
document.querySelector('button').addEventListener('click', function() {
  document.querySelector('.demo').innerHTML = '<h1>Injected content.</h1>';
})