DEV Community

Dhilip kumar
Dhilip kumar

Posted on

The Loading Shimmer!

When I heard the word Loading Shimmer I thought that is some new Cool stuff got introduced in Web Development. But it Turns out it is something that we have already noticed in our day to day web browsing.

When the DOM content is taking time to load due to slower Network, we used to show a loading icon/gif which indicates that the content is being loaded.
The OldSchool way of showing a loader:

Old Loading Icon

The above case works well to let user know that the content is being loaded.
But, it is not a Great User Experience.
So, how do we achieve a better User Experience?

Skeleton Screens to the Rescue.

Instead of showing a loading icon we could have a sample layout of our app which indicates how and where our content gets placed when that is fully loaded.

Like the following in Facebook

This is the "Loading Shimmer!"

The above layout consists of a separate sections to indicate Profile Picture, description and captions. A generic template which can be shown while the content is loading.

Let us Learn How to achieve this in our app

We shall implement the complete code for it with just CSS and HTML.

Full Code is available in codepen

Output:

The Boiler Plate:

The following HTML includes a layout which has a profile pic and few comments.


 jsx
<div class="card br">
   <div class="wrapper">
      <div class="profilePic animate"></div>
      <div class="comment br animate w80"></div>
      <div class="comment br animate"></div>
      <div class="comment br animate"></div>
   </div>
<div>



Enter fullscreen mode Exit fullscreen mode

 css
.br {
  border-radius: 8px;  
}
.w80 {
   width: 80%;
}
.card {
  border: 2px solid #fff;
  box-shadow:0px 0px 10px 0 #a9a9a9;
  padding: 30px 40px;
  width: 80%;
  margin: 50px auto;
}
.profilePic {
  height: 65px;
  width: 65px;
  border-radius: 50%;
}
.comment {
  height: 10px;
  background: #777;
  margin-top: 20px;
}




Enter fullscreen mode Exit fullscreen mode

.card class gives card like background.

Expanding animation:


 css
.wrapper {
  width: 0px;
  animation: fullView 0.5s forwards linear;
}

@keyframes fullView {
  100% {
    width: 100%;
  }
}


Enter fullscreen mode Exit fullscreen mode
  • .wrapper has a custom Expanding animation in which we increase the width from 0 to 100% while showing the shimmer.

The Shimmer:


 css
.animate {
   animation : shimmer 2s infinite;
   background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
   background-size: 1000px 100%;
}


Enter fullscreen mode Exit fullscreen mode

.animate class has a custom animation by name 'shimmer', duration 2 seconds, count of infinite (keeps repeating).

  • background is a linear-gradient.We need to use a gradient as it merges with the rest of the colour in its front and back.

  • Here we indicate that there is a gradient from left to right and the colour between 25% is #e2e2e2 (darker shade) and in all other places (o to 4% and 36% to 100%) it is #eff1f3(actual bg color)

  • background-size helps in providing the width and height for the background.


 css
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}


Enter fullscreen mode Exit fullscreen mode
  • In our custom shimmer animation we define how it should appear at the beginning of the animation and at the end of the animation.
  • So, the background's position is being moved from negative maximum of its width to the positive maximum.
  • Since we used infinite it keeps happening for every given duration (2s).

Don't forget to tap on the follow button :P

Full Code is available in codepen

That's All Folks :)

Top comments (10)

Collapse
 
perlatsp profile image
Perlat Kociaj

Thank you for sharing this awesome tip Dhilip.
In a real world example, how would you make it work. Display the shimmer while the content is loading and as soon as the content loads you set ‘display:none’ or remove it from the DOM

Collapse
 
dhilipkmr profile image
Dhilip kumar

Avoid using 'display: none' if that Part of the element is never gonna be shown in the future.

In our case, once the data loads we might not need to have the shimmer in the DOM. So remove it conditionally :)

Collapse
 
girindev profile image
girin-dev

Thank you for for sharing your code and knowledge. Could I translate this into Korean and share that on my blog? (In surely, I will write the source that is your blog.)
Because in Korean loading-shimmer is not famous yet. If you accept, I will be pleased to sharing your knowledge to Koreans.

Collapse
 
dhilipkmr profile image
Dhilip kumar

Sure please go ahead

Collapse
 
girindev profile image
girin-dev

one-it.tistory.com/entry/웹으로-구현하는-...

Hi, I translated your post into Korean! Thank you for your acceptation😆

Collapse
 
tr11 profile image
Tiago Rangel

I think yes.
The old school loader is not intresing and the user experience is not great.
Thank you for sharing this awesome tip!
Display the shimmer while the content is loading and as soon as the content loads (you can use onload="function()") you set ‘display:none’ using JS or remove it from the Javascript DOM

Collapse
 
khmaies5 profile image
Khmaies Hassen • Edited

This is great a great tip thanks.
Do you happen to know how to make lazy loading images with react like in the arabic.rt.com website? (first image looks like it have a cool polygons effect)

Collapse
 
dhilipkmr profile image
Dhilip kumar

Yep! You can have a look at my code repo at

github.com/dhilipkmr/reddit-modern

And the web app is live on

reddit-material.herokuapp.com

Search for "cats" in subreddit.

Collapse
 
anshulnegitc profile image
Anshul Negi

Great tutorial

Collapse
 
tr11 profile image
Tiago Rangel

Very useful, thank you!