How To Create A Custom HTML Preloader

A website preloader is quite helpful if you have pages that load for long. Preloaders can also give you an opportunity to show off some cool graphics and animations for your website.

Whether or not you use a preloader depends on the needs of your website. If your website has some pages that take long to load (typically more than 3 seconds), then a preloader is a good idea. On the other hand, using a preloader may affect user experience especially if the waiting time is too long. You should, therefore, make a design decision that brings the best user experience.

How a Preloader Works?

A preloader is like a visual signal on a website, showing users that a page is loading. It’s a graphic or animation that appears while the content is being loaded, keeping users engaged and easing potential frustration. Using JavaScript or other web techniques, the preloader monitors the loading progress and smoothly transitions to reveal the fully loaded page, making the user experience more seamless.

Requirements and prerequisites

Basic Understanding of HTML, CSS, and JavaScript: Familiarity with the fundamental concepts of HTML for structuring web pages, CSS for styling, and JavaScript for adding interactivity is essential. This tutorial assumes a basic knowledge of these languages.

Web Browser: Use a modern web browser like Google Chrome, Mozilla Firefox, or Microsoft Edge for testing and debugging your custom preloader.

For the purpose of this tutorial, you can download the source files for the Preloader to help you follow along:

Download Setup Files (Preloader.zip)

Note: As you test the source files, ensure that you load them with in a suitable environment such that all the files are loaded. For offline use, we recommend that you use Live Server and Vscode to load the files. Simply open the files in Vscode and run “index.html” using Live Server.

Step 1: HTML Structure

Begin by creating the basic HTML structure. This includes the main content of your website and a dedicated section for the custom preloader. Note that for this example, we have loaded some jquery and bootstrap to help in styling and animating our preloader as seen in the header section.

You can then craft an appealing preloader design using CSS and boostrap. This step involves creating a visually engaging animation that will keep users intrigued while the content loads. For this example, we used a simple animated progress bar and logo image as shown below:

The html structure of the website is shown below. You can also find it in the “index.html” if you downloaded the setup zip file. In this html, we also loaded our custom CSS (“web.css”) and javascript (“app.js”) files.

<html>

<head>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="web.css">
    
    <title>Preloader</title>
</head>
<body>
    <div class="container-fluid preloader ">
        <div class="container  ">
            <div  >
                <img src="logo.png" class=""  style="width: 150px;height: auto;margin-top: 50px;">
            </div>

                <span style="display: flex;flex-direction: row; justify-content: center;">
                        <div class="progress" style="margin-top:25px;width: 450px; max-width: 450px;height:35px;max-height: 35px!important;">
                            <div class="progress-bar progress-bar-striped progress-bar-animated active progress-bar-success" 
                           style="width:100%;">
                            <span class="text-white bold h2">Loading website ...</span>
                            </div>
                          </div>
                    </span>
              
        </div>
    
    </div>

    <div class="container-fluid content" id="content">
        <div class="container text-center" >
            <div >
                <br><br>
            <span class="h2">Website successfully loaded<span><br>
                <span class="lead">Visit <a href="https://www.25scripts.com" target="_blank">25scripts.com</a> to learn more..<span>
                </div>
        </div>

    </div>
    

    <script type="text/javascript" src="app.js"></script>
    
</body>
</html>

Step 2: Custom CSS Styling

Lets add some custom CSS to the website to help setup our preloader and content layouts. The custom CSS is as shown below. You can also find it in the “web.css” file.

body{
    margin: auto;
}
.content{
    display: none;
}
.preloader{
    background: rgb(157, 201, 243);
    height: 100vh!important;
    text-align: center;
    display: block;
}

Step 3: Adding Functionality with JavaScript

Using JavaScript, we can add functionality to the Preloader. This script monitors the loading progress and seamlessly transitions to reveal the fully loaded content.

The code for our javascript is shown below. You can also find it in the “app.js” file.

//variable to store amount of delay
const preloader_delay=1000;
document.addEventListener("DOMContentLoaded", function () {
    // Simulate a delay (you can replace this with actual loading time)
    setTimeout(function () {
        // Hide the preloader
        document.querySelector('.preloader').style.display = 'none';
        
        // Display the content
        document.getElementById('content').style.display = 'block';
    }, preloader_delay); // Adjust the timeout based on your needs
});

Explanation:

Below is a breakdown of the code use to control the Preloader.

const preloader_delay = 1000:
- Declares a constant variable preloader_delay and initializes it with a value of 1000 milliseconds (1 second).
- This variable represents the amount of delay, simulating the time the preloader will be displayed before hiding.
document.addEventListener
- Listens for the “DOMContentLoaded” event, indicating that the HTML document has been completely loaded and parsed.
setTimeout
- Initiates a timeout function that introduces a delay before executing the specified actions.
document.querySelector('.preloader').style.display = 'none':
- Selects the element with the class ‘preloader’ using document.querySelector().
- Modifies its CSS style property to set display to ‘none’, effectively hiding the preloader.
document.getElementById('content').style.display = 'block':
- Selects the element with the ID ‘content’ using document.getElementById().
- Modifies its CSS style property to set display to ‘block’, revealing the content that was initially hidden.

Conclusion:

By following these steps, you’ll have successfully implemented a custom preloader, providing users with a smoother and more enjoyable browsing experience. Remember to tailor the design and animation to match your website’s theme, ensuring a cohesive and visually pleasing result. As website performance continues to be a crucial factor in user satisfaction, this customization will undoubtedly contribute to a positive overall impression of your site.