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?
This:
Not this:
What’s a website pre-loader❔
Simple.
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.
What will I need? 🛠️
- H̸a̸m̸m̸e̸r̸ ̸a̸n̸d̸ ̸w̸r̸e̸n̸c̸h̸
- Your already wonderful HTML, CSS and jQuery skills.
- A text editor (I’ll be using VS Code just because for my last tutorial on variable fonts, I used it…I think VS Code is the one and only editor to love!)
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<link>. - Inside the
<body>we’ll make a<div>withclass "loading-page”. - Make another
<div>which contains the actual text. That is, a<h1>and 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 abackgroundcolor, give itwidthandheightof100vwand100vhreceptively so that it covers the entire viewport. Theoverflowmust be set tohidden. This is so that if the browser’s window is clipped, the content will be invisible. - For the
loading-pageclass, add a lighterbackgroundcolor than thebodywith samewidthandheight. - Next, for both the
loading-pageandcounter’sh1, add atopandleftof50%withtransform translate()property set to-50%for x and y-axes. Make sure thatfont-sizeis300pxwithbolderweight and from top it’s-10pxin margin.
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 to0. 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 itc. This will be used later when we’ll increment the percent. - Take a variable, say
i, use thesetInterval()function so that the following executes after a specific interval of time. - Select the
loading-pageandcounter h1classes and use the.html()function to get the secondaryccounter element. - Now for the actual percentage, select only the
loading-pageclass, use the.css()function to get its specified CSS property by passing thewidthand%as its parameters so that it can calculate the total percent remaining to load. - Increment both the
candcountervariables because, why not? - Now for the exception handling stuff, add an
ifcondition. If thecountergoes beyond100, or is101, then we canclearInterval(). - At last, for the
.ready()’s time parameter, use a lower value like35. 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:
CSS 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:
Liked this story? Feel free to clap and motivate me to write more and better. Did I missed something? Any suggestions? The comment box below serves the exact purpose!
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
