How to add a pre-loader in your website.

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 loaded.Their main purpose is to entertain site visitors while the actual content of the page is still loading in the background.

Follow these steps to add a pre-loader.

STEP 1 : Include a DIV tag in the begining of a body tag and give the tag a Class or Id whatever its on you.
for eg: id = "loading".

---

STEP 2 : Now link a css file to your HTML file.
See the code below. Here we add few styling to the id "loading".

1. Position :An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
2. Width :Set width to 100% so your pre-loader will cover entire screen.
3. Height : Set height to 100vh(100% of the viewport height.)
4. Background :Here in background we will use different attributes like #fff("white"color you can use whatever color), url(give the gif link which you want to use as a loader.),no-repeat(repeatation of gif will be cornered),center(To get pre-loader in center accn to viewport.).
5. z-index :The z-index property specifies the stack order of an element.An element with greater stack order is always in front of an element with a lower stack order.

---

STEP 3 :(a)Now add a onload event in a body tag so it will Execute a JavaScript immediately after a body content has been loaded:

(b)Now add a script tag inside Body tag. Then create variable which we will use to manipulate our 'loading' id. and set the display odf loading to none when the content of webpage load.

---

--Now your pre-loader is ready.

Comments

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

[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/

[Francis-ux]

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

[AmitThakur11]

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

[Francis-ux]

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

[AmitThakur11]

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

[Francis-ux]

Okay am going to try it now

[Dendi Handian]

say no more projects.lukehaas.me/css-loaders/

[Gabriel Antunes]

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

[Utsav Sheth]

Thank you @amitthakur11 . This is working for me.

[Rohini Bali]

Thanks for this will definitely try to implement.🌝

[Sudhir Dontha]

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

[Dendi Handian]

it doesn't need JS to animate.

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