DEV Community

Cover image for How to add a pre-loader in your website.

How to add a pre-loader in your website.

AmitThakur11 on January 07, 2021

PRE-LOADER A preloader — or what some call a loading screen — is the what you see on some sites before the main content of the web page is ...
Collapse
 
hepisec profile image
hepisec •

I'm sorry but the fact that you need a pre-loader means that you're doing it wrong. I hate those because after the pre-loader disappears you will typically see a simple site. It's a clear sign of bloat on your site.

However, if you collect a lot of data to display, you might want to render a placeholder where the data will be shown when it is available. Like Facebook does.

See cloudcannon.com/deconstructions/20...

Collapse
 
ironcladdev profile image
IroncladDev •

Actually, what I'd do is display the loader before anything else and wait until window is loaded and then hide the loader. That is the real way of making a loading screen.
I'm not done making this project yet, but you can see the loading screen and how it disappears once the window is loaded.
prototrondev.leviathancoding.repl.co/

Collapse
 
francisux profile image
Francis-ux •

My own did not work the loader work but did not dissapered later it just continue loading

Collapse
 
amitthakur11 profile image
AmitThakur11 •

You have done something wrong in the code . I am sure it will work just try once more.✌️

Collapse
 
francisux profile image
Francis-ux •

I did it correctly or is it because I did not link java script to my project

Thread Thread
 
amitthakur11 profile image
AmitThakur11 •

You have to link JavaScript to make loading finite...

Thread Thread
 
francisux profile image
Francis-ux •

Okay am going to try it now

Collapse
 
dendihandian profile image
Dendi Handian •
Collapse
 
rohinibali profile image
Rohini Bali •

Thanks for this will definitely try to implement.🌝

Collapse
 
gbrantunes profile image
Gabriel Antunes •

Another good option is to make your own CSS-made loaders with keyframes.

Collapse
 
utsavsheth profile image
Utsav Sheth •

Thank you @amitthakur11 . This is working for me.

Collapse
 
sudhirdontha profile image
Sudhir Dontha •

Nice work!! Need to work on my portfolio now 🙂

Collapse
 
dendihandian profile image
Dendi Handian •

it doesn't need JS to animate.

Collapse
 
ofrank_turtle profile image
O. Frank Turner •

First I don't understand where in the code this goes. I tried it is two different places and when I preview it all that happens is there is code across the top of the index page.???