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
 
l4znet 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 😀