Fasal Engineering
Published in

Fasal Engineering

Understanding and Implementing your own Skeleton Loader using HTML, CSS, and JQuery

We all are familiar with the latest frontend technologies which are HTML, CSS, JQuery, and even JavaScript. Over the past times, we full-stack engineers at Fasal have been working a lot on improving the user experience for our users and provide them with a seamless experience using our web and mobile apps. Recently, I and my team at customer success have researched a bit on working with skeleton loaders in our web apps and providing whole new UI/UX features to our users and customers to provide the best experience during this waiting time as this adds utmost importance to evaluating the performance of the whole product.

In this article, I will be explaining to you how to understand, design, and implement your own skeleton loader to make your web apps and websites looking simply amazing while loading your screen and give you an amazing experience while using our app.

So, first of all, let us know what exactly are skeleton loaders?

Now, your next move should be to think about how you want your loader to be designed, before finalizing your design consider on following important two points to be more specific about your loader:

  1. Watch out for your content, see how your data content loads make your loader look much similar to your data content that will be seen when the page completely loads because this gives the user a rich experience while waiting and they won’t mind if your app loads slowly.
  2. Don’t increase your animation time, this will hinder users from visualizing the loader and enjoying their wait time while the screen loads.

Now let us without thinking much about other factors let us design our loader and understand how it works!

Now, for designing first you need to be very clear about the outside structure of your skeleton loader, there are many skeleton loaders that we could implement in our web apps and websites. Suppose you have the given design as shown below:

Skeleton Loader Design

Now, as per the given design, you can easily figure out the following points:

  1. You need to have a white card that would be still and would not animate.
  2. You would have to design multiple boxes and style them along with a picture placeholder for your icon on the top-left of each card.
  3. Also, here make sure only the multiple boxes and the picture placeholder should animate in each card and the rest should be still.

Now, you have your complete design along with its understanding, let us dive straight to code and understand how to implement

Your first approach should be writing your HTML code which would contain your cards that has to be shown while your screen loads!

So, for that simply code your HTML as shown!

Here you can easily see that we have created five divs of the class name as “card” because we need to create five cards as shown in your design.

Now, we will need to give some effects to these plain cards and it’s components using CSS so, let's begin!

Follow the following steps to design all components one by one

  1. Design you card

Here you can also create your body design as I did according to your needs and screen size.
Now, your created design would look something like this (follow this link)

2. Add animation

Now, your created design would look something like this (follow this link)

Now, let us explore what are the following CSS properties which are stated in the above code one by one!

  1. ::before- In the above code you could see ::before has been used after .img, .message-content, .sub-message-content so, this CSS property mainly inserts something before the content of each selected element(s).
  2. linear-gradient- This CSS property allows you to display smooth transitions between two or more specified colors, in the above code we have specified the direction of flow of our color change towards the right and to give it a moving look so that it seems the page is still loading we have changed the color in every different size of the screen i.e. 0%, 20%, 40% and 100% (you can, of course, change this accordingly to give it a different look in your screen).
  3. Since we don’t want the background to get repeated vertically and horizontally so, we set background-repeat to no-repeat.
  4. keyframes- This CSS property lets you change the animation gradually from the current style to the new style at certain times. (Here we have named it as shimmer) and this property is used in animation to finally create your animation.
  5. The time (here 2s) in the animation CSS property determines how fast your animation will be shown to the users on the screen while your page loads along with the direction (here linear) and should always continue so we specified it as infinite.

Amazing!! you just animated your card and gave it an awesome loading look!

Now, our next move will be to design the boxes and image place holder as shown in the design!

3. Add boxes and image placeholder

Now, your created design would look something like this (follow this link)

Now, you could see your design coming live and your skeleton loader is created!

As in the above final design, we can see that only one card is in action similarly you can add all the remaining four cards to make your skeleton loader template look the same as given in the design

Your final skeleton loader will look something like this (follow this link).
Now, accordingly, you can change the padding, margin size of your card, and other features which allow you to modify your design according to your need!

Now, you just have to include a jQuery code that would help you render your both loading and post-loading screen on your web app or website as:

This will help show you your loader while your screen is loading and will then show the complete data on your web app or website once, the screen is loaded completely.

One of the major advantages of using the skeleton loader is that helps you to provide a user-rich experience while the user still waits on your app or website he/she will enjoy their time while waiting as well.

Being a developer I would strongly suggest anyone to work on this type of amazing interface which the users would love to see and would provide your app and website an amazing look!

Try it!!

For more information related to skeleton loaders and it’s implementation you can follow the link here and also learn about the skeleton loader npm package here

Read more about animations in CSS here
Read more about transformations in CSS here

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Swapnil Kant

Hi, I am Swapnil Kant, an avid programmer, and a full-time learner! One who is highly interested in Algorithm Optimization and Development