Create a full-screen website pre-loader in a jiffy
JQuery at your service…
I hope most of you have seen those (almost) never-ending loading indicator icons. Yeah, good internet connection is a must. They were quite boring, circular (as shown in the image above) and greyish, not even coloured! Hah. These days, on the modern websites that are made on frameworks rather than just HTML/CSS/JS, which are reactive, have a really cool animation for the same website loaders. Some use vectors, some use texts, some even use a video which fades out quite soothingly. Check out the Chrome Experiments website, you’ll get to know what I mean. How about making one? Let’s make our very own full-screen website pre-loader.
What will I make?
What’s a website pre-loader❔
This component of a website shows up until the rest of the webpage loads in background. They can be text-based (which we’ll make), simple animations, a text with a sound or any vector graphic like the company’s logo. Essentially, the main task of a pre-loader is to show these cool stuff when the webpage is loading so that the user knows that the website is loading (and hasn’t crashed).
This also keeps the visitor entertained, who knows, we can have a pre-loader which displays jokes…
What a pre-loader does❔
In its most basic form, it displays a circular or moving stripes along with the text which shows how much percent of the website is loaded at that point of time. And yes, some of them are really interesting.
Shall we, pre-load?
Important thing first, grab the latest jQuery CDN from here. In the HTML, we’ll have these:
- The CDN
<script>tag inside the
<head>along with the style-sheet
- Inside the
<body>we’ll make a
- Make another
<div>which contains the actual text. That is, a
<h2>tag which says “LOADED…”. Let this be the counter class.
Let’s come to the styling part before we dive into jQuery. Make sure you style according to these:
- For the
body, add a
backgroundcolor, give it
100vhreceptively so that it covers the entire viewport. The
overflowmust be set to
hidden. This is so that if the browser’s window is clipped, the content will be invisible.
- For the
loading-pageclass, add a lighter
backgroundcolor than the
- Next, for both the
h1, add a
transform translate()property set to
-50%for x and y-axes. Make sure that
bolderweight and from top it’s
Here’s the jQuery part then,
- Use the
.ready()function to make it available after the document is loaded.
- Add a
countervariable and set it to
0. This will take in the count of the total percentage. Higher the number, lower the percentage. We’ll also need a secondary counter, let’s call it
c. This will be used later when we’ll increment the percent.
- Take a variable, say
i, use the
setInterval()function so that the following executes after a specific interval of time.
- Select the
counter h1classes and use the
.html()function to get the secondary
- Now for the actual percentage, select only the
loading-pageclass, use the
.css()function to get its specified CSS property by passing the
%as its parameters so that it can calculate the total percent remaining to load.
- Increment both the
countervariables because, why not?
- Now for the exception handling stuff, add an
ifcondition. If the
100, or is
101, then we can
- At last, for the
.ready()’s time parameter, use a lower value like
35. More value will mean slow loading speed.
Time to save and run the code! You will get the same output provided that you followed each step. If now, here are some screenshots of the code:
HTML and jQuery code:
Where to next? 🤔
This was a text-based full screen pre-loader, we can have illustration based, video based or even a sound based pre-loader. There are many ways to make a pre-loader, check out some of the great resources for the same:
Modern high-speed Internet has really made us spoiled. These days, if a website takes more than 4 seconds to load, we…medium.muz.li
> Originally published at Codeburst.io.