Creating a Skeleton Loader Using CSS like facebook card loader 10 minutes

Skeleton Loader CSS facebook card

By Code solution
Sep 17th, 2021
0 comments
6

Skeleton Loaders are used very commonly in Modern Websites/Apps to indicate loading of data instead of using the traditional loaders, spinners, etc.

We are going to convert the Blog Card and list avatar with title and description to it's own Skeleton loader as shown in the GIF below :

HTML Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700;900&display=swap" rel="stylesheet" />
    <link href="./style.css" rel='stylesheet' />
  </head>
  <body>
    <div class="container">
      <div class="card">
        <div class="img-cont">
          <img class="img" src="https://www.codesolution.co.in/images/code/codeicon.png" alt="Codesolution" />
        </div>
        <div class="list-info">
          <div class="list-avatar-img">
            <img src="https://cdn-images-1.medium.com/max/1200/1*5-aoK8IBmXve5whBQM90GA.png" alt="flutter image" class="user-avatar-img" />
          </div>
          <div class="list">
            <div class="name">
              <span>Codeoslution</span>
            </div>
            <div class="category">
              <span>Flutter</span>
            </div>
          </div>
        </div>
      </div>
      <div class="card card-loader-skeleton">
        <div class="img-cont"></div>
        <div class="list-info">
          <div class="list-avatar-img"></div>
          <div class="list">
            <div class="name">
              <span>Codeoslution</span>
            </div>
            <div class="category">
              <span>Flutter</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="card card-loader-skeleton">
        <div class="list-info">
          <div class="list-avatar-img"></div>
          <div class="list">
            <div class="name">
              <span>Codeoslution</span>
            </div>
            <div class="category">
              <span>Flutter</span>
            </div>
            <div class="discription">
              <span>Lorem Ipsum is simply dummy text.</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS Code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Source Sans Pro", sans-serif;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  background: #fff;
  flex-direction: column;
}
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card {
  background: #fff;
  position: relative;
  margin: 10px;
  padding: 2rem;
  border-radius: 5px;
  box-shadow: 0 10px 100px rgba(0, 0, 0, 0.1);
  width: 45rem;
  float: left;
  overflow: hidden;
}

.img-cont {
  height: 30rem;
  margin-bottom: 2rem;
  border-radius: 5px;
  overflow: hidden;
}

.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list-info {
  display: flex;
  align-items: center;
}

.list-avatar-img {
  width: 6rem;
  height: 6rem;
  margin-right: 2rem;
  border-radius: 50rem;
  overflow: hidden;
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.name {
  font-size: 2.2rem;
  margin-bottom: 5px;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.category {
  font-size: 1.3rem;
  color: #999;
  border-radius: 2px;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.discription {
  font-size: 1.3rem;
  color: #999;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
.card-loader-skeleton .img-cont {
  background: #eee;
}

.card-loader-skeleton .list-avatar-img {
  background: #eee;
}

.card-loader-skeleton .name span,
.card-loader-skeleton .category span,
.card-loader-skeleton .discription span {
  background: #eee;
  color: #eee;
  border-radius: 5px;
}
.card-loader-skeleton::before {
  content: "";
  position: absolute;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.9),
    transparent
  );
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  animation: loading 0.6s infinite;
}

@keyframes loading {
  0% {
    transform: skewX(-10deg) translateX(-100%);
  }
  100% {
    transform: skewX(-10deg) translateX(200%);
  }
}

I will add an extra class called card-loader-skeleton on the HTML div with the class called card as shown below so we can target the elements inside the card.

<div class="card card-loader-skeleton">

Now, we will remove both of these images.

<div class="card card-loader-skeleton">
  <div class="img-cont"></div>
  <div class="list-info">
    <div class="list-avatar-img"></div>
    <div class="list">
      <div class="name">
        <span>Codeoslution</span>
      </div>
      <div class="category">
        <span>Flutter</span>
      </div>
    </div>
  </div>
</div>

And we will add a background color to the image containers as shown below using the skeleton class.

.card-loader-skeleton .img-cont {
  background: #eee;
}

.card-loader-skeleton .list-avatar-img {
  background: #eee;
}

.card-loader-skeleton .name span,
.card-loader-skeleton .category span,
.card-loader-skeleton .discription span {
  background: #eee;
  color: #eee;
  border-radius: 5px;
}

we will add the Shining Effect Animation on the entire Skeleton Card.

To implement that, we will target the before sudo class of card-loader-skeleton as shown below and add animation keyfram.

.card-loader-skeleton::before {
  content: "";
  position: absolute;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.9),
    transparent
  );
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  animation: loading 0.6s infinite;
}

@keyframes loading {
  0% {
    transform: skewX(-10deg) translateX(-100%);
  }
  100% {
    transform: skewX(-10deg) translateX(200%);
  }
}

I hope you find this post to be helpful and thanks for reading it

About the author

Code solution

info@codesolution.co.in

Discussion

0 comments

Add comment To Login

Add comment