Skeleton vs Loader

Both skeletons and loaders are UI elements used to indicate to the user that content is being loaded. However, they are used in different contexts and have different purposes.

A skeleton is a placeholder UI element that is displayed in place of content that is being loaded. It is designed to give the user a sense of what the final content will look like, even before it is fully loaded. Skeletons are often used when loading large amounts of content, such as a list of articles or a product catalog. They typically consist of simple shapes or outlines that represent the content that will eventually be loaded.

A loader, on the other hand, is a UI element that is displayed while content is being loaded. It is used to indicate to the user that content is being loaded and to give them a sense of progress. Loaders can take many forms, such as spinning circles, progress bars, or animated icons.

In summary, skeletons are used to provide an indication of what the final content will look like, while loaders are used to provide feedback on the progress of content loading. Both are useful UI elements that can improve the user experience by reducing perceived load times and providing a more polished, responsive interface.

How to create a simple skeleton using HTML and CSS

HTML

<div class="article-skeleton">
  <div class="article-skeleton__image"></div>
  <div class="article-skeleton__content">
    <div class="article-skeleton__title"></div>
    <div class="article-skeleton__author"></div>
    <div class="article-skeleton__date"></div>
  </div>
</div>

CSS

.article-skeleton {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 4px;
  background-color: #f5f5f5;
  margin-bottom: 16px;
}
.article-skeleton__image {
  width: 100px;
  height: 100px;
  background-color: #ddd;
  margin-right: 16px;
}
.article-skeleton__content {
  flex: 1;
}
.article-skeleton__title {
  width: 80%;
  height: 24px;
  background-color: #ddd;
  margin-bottom: 8px;
}
.article-skeleton__author {
  width: 50%;
  height: 16px;
  background-color: #ddd;
  margin-bottom: 8px;
}
.article-skeleton__date {
  width: 30%;
  height: 16px;
  background-color: #ddd;
}

This code creates a simple skeleton for an article that includes an image, title, author, and publication date. The article-skeleton class creates a container that has a gray background color and rounded corners. The article-skeleton__image class creates a placeholder image, while the article-skeleton__content class creates a container for the title, author, and date. The article-skeleton__title, article-skeleton__author, and article-skeleton__date classes create placeholders for the respective content.

You can customize this code to fit the specific needs of your project.

How to create a simple loader using HTML and CSS

HTML

<div class="loader"></div>

CSS

.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

This code creates a simple loader that consists of a spinning circle. The loader class creates a container for the loader that has a border, width, height, and a CSS animation that causes it to spin. The @keyframes spin block defines the animation that is applied to the loader. The animation rotates the loader 360 degrees over the course of one second, creating the spinning effect.

You can customize this code to fit the specific needs of your project. For example, you could change the colors of the borders or the size of the loader to match the design of your site.