Learn how to create skeleton loading using HTML and CSS for a better user experience. Follow our step-by-step guide with source code examples.
.jpg "Creating Skeleton Loading Using HTML and CSS (Source Code Included)")
.jpg)
Table of Contents
In the world of web development, providing a seamless user experience is paramount. Slow-loading web pages can be frustrating for users, leading to higher bounce rates and diminished engagement. To tackle this issue, web developers have adopted various techniques to optimize website performance and enhance user experience. One such technique is skeleton loading.
Skeleton loading, also known as skeleton screens or placeholders, is a method that displays a basic outline or structure of a web page while the actual content is being loaded. It provides users with a visual representation of the page's layout, making them feel that something is happening rather than staring at a blank screen or an endless loading spinner.
The purpose of skeleton loading is to create a smooth and uninterrupted browsing experience, even during the loading process. By showing users a skeleton or wireframe of the page's design, it gives the illusion of a faster-loading website and reduces the perceived load times. This visual feedback engages users, encouraging them to stay on the page and interact with the content even before it fully loads.
Implementing skeleton loading requires a combination of HTML and CSS. HTML provides the structure and layout of the page, while CSS is responsible for styling and animating the skeleton elements. By following a few simple steps and best practices, you can effectively implement skeleton loading and significantly improve your website's performance and user experience.
In this blog post, we will delve deeper into the world of skeleton loading. We will provide a step-by-step guide on how to implement it using HTML and CSS, and share best practices to ensure optimal results. By the end, you will have a clear understanding of skeleton loading and the tools necessary to enhance your website's loading experience. Let's get started!
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our skeleton loader.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Here's a breakdown of the code:
<!DOCTYPE html>: This is the document type declaration and informs the browser that the document is an HTML5 document.
<html lang="en">: This is the opening tag for the HTML document and specifies the language of the content, in this case, English.
<head>: This section contains meta-information about the HTML document and is not displayed on the web page itself.
<title>Skeleton Loading</title>: This is the title of the web page that appears in the browser's title bar or tab.
<meta charset="UTF-8" />: This meta tag specifies the character encoding for the document, ensuring proper handling of non-ASCII characters.
<meta name="viewport" content="width=device-width" />: This meta tag sets the viewport width to the device width, ensuring that the web page is displayed properly on various devices.
<link rel="stylesheet" href="styles.css" />: This line links an external CSS file called "styles.css" to the HTML document. CSS is used to define the visual styles and layout of the web page.
<body>: This is the opening tag for the body section of the web page, where the visible content is placed.
<div class="container">: This <div> element with the class "container" acts as a wrapper for the content inside it.
Within the container, there are two <div> elements with the class "card". These represent two cards or sections on the web page.
Inside each card, there is a <div> element with the class "card-img". The first card has an additional class "skeleton". This represents an image placeholder with a skeleton loading effect.
After the image placeholder, there is a <div> element with the class "card-body". It contains the main content of the card.
Inside the "card-body", there is an <h2> element with the class "card-title". This represents the title of the card. Similar to the image placeholder, it has the "skeleton" class to indicate that it's a placeholder.
Following the title, there is a <p> element with the class "card-intro". This represents the introductory text or description of the card. Again, it has the "skeleton" class.
The second card follows a similar structure but includes actual content instead of placeholders. It has an <img> element inside the "card-img" div, displaying an image sourced from the provided URL.
Finally, the closing tags </div>, </body>, and </html> close the corresponding elements in the HTML document.
This is the basic structure of our skeleton loader using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the skeleton loader is in place, the next step is to add styling to the skeleton loader using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our skeleton loader.
Here's an explanation of the code:
The CSS rule *, *:after, *:before applies the box-sizing: border-box property to all elements, their pseudo-elements, and their pseudo-selectors. This ensures that the total width and height of elements include the padding and border, rather than being affected by them.
The body selector sets the styles for the body element. It specifies the font family as "Inter" (a sans-serif font) and sets the background color to #f2f5f7.
The .card class styles a card component. It uses flexbox for layout (display: flex) with a column direction (flex-direction: column). The flex-basis, flex-shrink, and flex-grow properties control the behavior of the flex item within its flex container. The max-width property sets the maximum width of the card to 100%. It has a white background color (background-color: #FFF), a box shadow, and rounded corners (border-radius: 10px). The overflow: hidden property ensures that any content exceeding the card's boundaries is clipped. It also has some margin (margin: 1rem) for spacing.
The .card-img class styles the image container within the card. It sets the padding-bottom to 56.25% to maintain an aspect ratio for the image. The position: relative property is used to position the image element inside the container. The image itself (card-img img) is set to occupy 100% width of its container.
The .card-body class sets padding around the content inside the card.
The .card-title class styles the title of the card. It defines the font size, line height, and font weight.
The .card-title.skeleton class adds additional styles for a skeleton loading effect. It sets a minimum height for the title and adds border-radius to create a rounded corner effect.
The .card-intro class styles the introductory text of the card. It sets the margin-top and line-height properties.
The .card-intro.skeleton class applies styles for the skeleton loading effect to the introductory text, similar to .card-title.skeleton.
The .skeleton class defines styles for the skeleton loading effect. It sets the background color and applies a linear gradient background image to create a shining effect. The background image is animated using CSS animation (shine) to create the illusion of a shimmering effect.
The @keyframes shine and @-webkit-keyframes shine define the animation for the .skeleton class. It animates the background position from left to right to create the shining effect.
The .container class styles a container element. It sets the position to absolute and stretches it to cover the entire space of its parent element. It uses flexbox to align its child elements both vertically and horizontally in the center (align-items: center; justify-content: center). The flex-wrap: wrap property allows the child elements to wrap onto multiple lines if needed.
This will give our skeleton loader an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
*, *:after, *:before {
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
background-color: #f2f5f7;
}
.card {
display: flex;
flex-direction: column;
flex-basis: 300px;
flex-shrink: 0;
flex-grow: 0;
max-width: 100%;
background-color: #FFF;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
border-radius: 10px;
overflow: hidden;
margin: 1rem;
}
.card-img {
padding-bottom: 56.25%;
position: relative;
}
.card-img img {
position: absolute;
width: 100%;
}
.card-body {
padding: 1.5rem;
}
.card-title {
font-size: 1.25rem;
line-height: 1.33;
font-weight: 700;
}
.card-title.skeleton {
min-height: 28px;
border-radius: 4px;
}
.card-intro {
margin-top: 0.75rem;
line-height: 1.5;
}
.card-intro.skeleton {
min-height: 72px;
border-radius: 4px;
}
.skeleton {
background-color: #e2e5e7;
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-size: 40px 100%;
background-repeat: no-repeat;
background-position: left -40px top 0;
-webkit-animation: shine 1s ease infinite;
animation: shine 1s ease infinite;
}
@-webkit-keyframes shine {
to {
background-position: right -40px top 0;
}
}
@keyframes shine {
to {
background-position: right -40px top 0;
}
}
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
} Final Output:
.gif "Creating Skeleton Loading Using HTML and CSS (Source Code Included)")
Conclusion:
Skeleton loading is a powerful technique that web developers can employ to enhance user experience and optimize website performance. By displaying a skeleton or wireframe of the page's structure while the content is loading, users are provided with visual feedback that reduces frustration and improves engagement.
Throughout this blog post, we have explored the concept of skeleton loading and its benefits. We have also provided a detailed guide on how to implement skeleton loading using HTML and CSS.
By following the step-by-step instructions and incorporating skeleton loading into your web design, you can create a seamless browsing experience for your users. The visual feedback provided by skeleton loading not only gives the illusion of faster load times but also encourages users to interact with the content before it fully loads.
Remember to keep the skeleton loading design simple and lightweight, matching the layout and structure of the actual content. Test your implementation across different devices and browsers to ensure consistent performance. Additionally, consider providing alternative content or fallbacks for users with slower connections or disabled CSS.
By implementing skeleton loading effectively, you can reduce bounce rates, increase user engagement, and create a positive impression of your website. Prioritize user experience and optimize your website's loading process using the techniques shared in this blog post.
Start incorporating skeleton loading into your web development workflow and witness the positive impact it brings to your users' browsing experience. Stay up to date with the latest best practices in web development to continuously improve your skills and create exceptional websites. Happy coding!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
