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.