DEV Community

Add a loader to your website

Clément Gaudinière on May 12, 2021

Hello, today we will learn how to add a loader to our website ! Loaders have been used for a long time, it has been proven that users are more pati...
Collapse
 
pavelloz profile image
Paweł Kowalski •

I have other idea; make your website so fast it doesnt need loader.

Collapse
 
cyrlah profile image
Charly Escalona •

But sometimes the user's internet speed are not enough powerful to load quickly your website, so I think a loader are useful in this case.

Collapse
 
brandonwallace profile image
brandon_wallace •

Yes Pawel, it is a great idea to make the website load fast. Loaders are good for processes that could take a long time such as querying an API or a database for data. I put a loader on one of my websites during the query to two APIs but it only shows for split a second.

Collapse
 
pavelloz profile image
Paweł Kowalski •

Ive read somewhere that if spinner is shown for less than 2 seconds, its better to not show it, because it confuses users. Some applications even show spinners as long as its needed but not less than 2 seconds, to avoid it.

Collapse
 
ps173 profile image
Pratham Sharma •

loading.io/css/

Check this site they provide some neat loaders and their code snippets for free

Collapse
 
clementgaudiniere profile image
Clément Gaudinière •

Yes my loader comes from this site, you can also use this site which allows to customize them : wifeo.com/generateur-loader-css-gr...

Collapse
 
elijahe35939317 profile image
ElijahE •

You could also implement that with gifs i hope?

Collapse
 
clementgaudiniere profile image
Clément Gaudinière •

It is possible, you need to replace the

<div class="lds-ripple">
      <div></div>
      <div></div>
 </div>
Enter fullscreen mode Exit fullscreen mode

with an image :

<img src="yourImg.gif"  alt="Your Img">
Enter fullscreen mode Exit fullscreen mode

This method is less recommended since gifs take longer to load. 😉

Collapse
 
youpiwaza profile image
max •

You also need to specify the loading of the gif outside of the loader, else the loader won't display from the beginning :/

Collapse
 
viracoding profile image
viracoding •

Do u find it okay to use setTimeout on your page? I try every time to avoid it.

Collapse
 
clementgaudiniere profile image
Clément Gaudinière •

The setimeout is not there to define the duration of the loader but to coordinate the keyframe animation and the display : none animation in javascript.

Collapse
 
peprahk713 profile image
peprahk713 •

This has really made my day as a beginner......thank you very much

Collapse
 
clementgaudiniere profile image
Clément Gaudinière •

But you're welcome 😀