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
Conner Ow

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
 
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
 
rohinibali profile image
Rohini Bali

Thanks for this will definitely try to implement.🌝

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.???