Custom Neon Light Preloader using HTML,CSS and Javascript

Hello readers, Today in this blog you’ll learn how to create a custom preloader using HTML, CSS, and Javascript. Earlier, you learned to Create an Awesome Card with HTML & CSS.

What is a preloader?

Preloader is such a loader that you see on the screen while loading all the other content of the website. Generally, a preloader is added to websites to make the visitors feel amazing. It’s the unique and best method to interact with visitors. Visitors will not feel bored in the presence of a preloader while loading the content of the website like text, photos, videos, etc.

3 Tips to make preloader Better

Use custom-coded loader rather than using images or GIFs
Add cool animation to your loader
Do not show text only as a loader create an object and animate it.

Today I will show you how you can create your own custom-coded preloader using HTML, CSS & Javascript with awesome animation. In this preloader, I haven’t used any plugin or library to animate it. It is animated with pure CSS. I have created two rectangles where one is bigger and inside the bigger one, there is another rectangle.

The whole body of the loading page is completely black to show the neon light effect in the loader. At the exact center of the web page, there are two rectangles with white backgrounds. To make the neon light effect, I have given three layers of box shadow. The bigger rectangle is rotating clockwise whereas the smaller one is rotating anti-clockwise. I have used onload event to disappear the preloader after the content of the website is loaded completely.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Create Preloader using HTML, CSS & Javascript).

Video tutorial of custom preloader using HTML, CSS and Javascript

All this preloader design is based on HTML, CSS & Javascript. If you’re a beginner you can also create this type of preloader. If you like this program (Preloader Using HTML, CSS, and Javascript) and want to get source code. You can easily get the source code of this program. To get the source codes you just need to scroll down.

Preloader Using HTML, CSS, and Javascript [Source Codes]

To create this program (Preloader Using HTML, CSS, and Javascript). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following code into your file. First, create an HTML file with the name index.html and paste the given codes into your HTML file. Javascript code is written inside an HTML file. You can use it in an external file too. Remember, you’ve to create a file with a .html extension.

HTML

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preloader</title>
    <link rel="stylesheet" href="style.css">
</head>
<body onload="loaded()">
    <div class="loader">
        <div class="rect_out">
            <div class="rect_in"></div>
        </div>
        <p>Loading...</p>
    </div>

    <!-- main content starts -->
    <div class="container">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/ZWPMTv_NiSE" title="YouTube video player"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen></iframe>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/Mr1bqoFvnLs" title="YouTube video player"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen></iframe>
    </div>

    <!-- Javascript code for adding functionality in preloader -->
    <!-- you can use this JavaScript code externally in seperate file by linking the file location here -->
    <script>
        var loader = document.querySelector('.loader');
        function loaded(){
            loader.style.display = 'none';
        }
    </script>
</body>
</html>

Second, create a CSS file with the name style.css and paste the given code into your CSS file. Remember, you’ve to create a file with a .css extension.

CSS

  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.loader{
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #000000;
}
.loader .rect_out{
    width: 200px;
    height: 200px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 10px #00d9ff,
                0px 0px 20px #00d9ff,
                0px 0px 50px #00d9ff ;
    animation: rect_out_rotate 3s linear infinite;
}
.loader .rect_out .rect_in{
    height: 100px;
    width: 100px;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px #00d9ff,
                0px 0px 20px #00d9ff,
                0px 0px 50px #00d9ff ;
    animation: rect_in_rotate 2s linear infinite;
}
.loader p{
    color: #ffffff;
    margin-top: 30px;
    font-size: 16px;
    font-family: Verdana, sans-serif;
}
@keyframes rect_out_rotate {
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(90deg);
    }
    50%{
        transform: rotate(180deg);
    }
    75%{
        transform: rotate(270deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes rect_in_rotate {
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(-90deg);
    }
    50%{
        transform: rotate(-180deg);
    }
    75%{
        transform: rotate(-270deg);
    }
    100%{
        transform: rotate(-360deg);
    }
}
.container{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 30px 0px;
}
.container iframe{
    margin-top: 10px;
}
@media (max-width:450px){
    .loader .rect_out{
        width: 150px;
        height: 150px;
    }
    .loader .rect_out .rect_in{
        width: 70px;
        height: 70px;
    }
}

That’s all, now you’ve successfully created a custom preloader using HTML, CSS, and Javascript. If your code does not work or you’ve faced any errors/problems then please comment down. If you feel this article had helped you, please share it with your friends.

What is a preloader?

3 Tips to make preloader Better

You Might Also Like

Video tutorial of custom preloader using HTML, CSS and Javascript

Preloader Using HTML, CSS, and Javascript [Source Codes]

HTML

CSS

Post a Comment

Post a Comment

About Us

Contact Form