Lexington has been awarded a grant from Astro, to celebrate. Get a 30% discount. Apply code LEXINGTON30 ( uppercase ) at checkout.
It’s Monday again, yay! Today, we’re going to build a skeleton loading screen using JavaScript and Tailwind CSS. Dang, aren’t we fancy?
A skeleton loader is a loading screen that appears while content is being loaded. It’s a visual representation of the content that’s being loaded, giving the user a sense of progress and a better understanding of what’s happening. Skeleton loaders are commonly used in web development to provide a more polished and professional look to the user interface.
Skeleton loaders are useful in a variety of scenarios, including:
and many other similars use cases.
Id’s
id="content"
: Assigns a unique ID to the content element. <div id="content">
<!-- Skeleton loader will be here -->
</div>
The skeleton is made with a series of divs with different widths and heights without content. It’s a visual representation of the content that’s being loaded.
<div class="animate-pulse p-4 space-y-4">
<div class="h-4 bg-neutral-200 rounded w-3/4"></div>
<div class="h-4 bg-neutral-200 rounded w-1/2"></div>
<div class="h-20 bg-neutral-200 rounded"></div>
<div class="flex flex-col gap-2">
<div class="h-4 bg-neutral-200 rounded w-5/6"></div>
<div class="h-4 bg-neutral-200 rounded w-4/6"></div>
</div>
</div>
The actual content is the content that the customr will be consuming, using, etc,…
<div class="p-4 prose">
<h4>Actual Content</h4>
<p>This is the real content that has finished loading.</p>
<img src="https://i.pinimg.com/564x/a4/ae/54/a4ae54bdd21cbbdb2ccc377ab07b6c6f.jpg" alt="Placeholder" class="w-full rounded mt-4">
<p>Additional text content goes here. It can be as long as needed.</p>
</div>
The createSkeletonLoader function
function createSkeletonLoader()
: This function creates the skeleton loader markup.return
: This line of code returns the skeleton loader markup.return
: This line of code returns the skeleton loader markup.
The createContent functionfunction createContent()
: This function creates the actual content markup.return
: This line of code returns the actual content markup.
The contentDiv variableconst contentDiv = document.getElementById("content");
: This line of code selects the content element with the ID content
.
Showing the skeleton loadercontentDiv.innerHTML = createSkeletonLoader();
: This line of code sets the inner HTML of the content element to the skeleton loader markup.
Simulating content loadingsetTimeout(() => {
: This line of code sets a timeout function that will be executed after 2 seconds.contentDiv.innerHTML = createContent();
: This line of code sets the inner HTML of the content element to the actual content markup.}, 2000);
: This line of code sets the timeout duration to 2 seconds.function createSkeletonLoader() {
return `
<div class="animate-pulse p-4 space-y-4">
<div class="h-4 bg-neutral-200 rounded w-3/4"></div>
<div class="h-4 bg-neutral-200 rounded w-1/2"></div>
<div class="h-20 bg-neutral-200 rounded "></div>
<div class="flex flex-col gap-2>
<div class="h-4 bg-neutral-200 rounded w-5/6"></div>
<div class="h-4 bg-neutral-200 rounded w-4/6"></div>
</div>
</div>
`;
}
function createContent() {
return `
<div class="p-4 prose">
<h4>Actual Content</h4>
<p>This is the real content that has finished loading.</p>
<img src="https://i.pinimg.com/564x/a4/ae/54/a4ae54bdd21cbbdb2ccc377ab07b6c6f.jpg" alt="Placeholder" class="w-full rounded mt-4">
<p>Additional text content goes here. It can be as long as needed.</p>
</div>
`;
}
const contentDiv = document.getElementById("content");
// Show skeleton loader
contentDiv.innerHTML = createSkeletonLoader();
// Simulate content loading
setTimeout(() => {
contentDiv.innerHTML = createContent();
}, 2000); // Change content after 2 seconds
In this tutorial, we learned how to create a skeleton loading screen using JavaScript and Tailwind CSS. We saw how to create a skeleton loader and an actual content section, and how to show and hide them using JavaScript.
I hope you found this tutorial helpful and have a great day!
/Michael Andreuzza
Get lifetime access to every theme available today for $199 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
— No subscription required!