Skip to main content

Add preloader animation on website just some step of code (HTML, CSS, JavaScript) - scoobcode

Preloader is a unique feature for a website, this gives a professional look to a website. Here in this blog, I will share my code, where you going to learn how to add a preloader animation effect in just some line of HTML, CSS, and JavaScript code.

Note: Copy the code and make your own design. Also, go to our YouTube channel for more useful content.

Full video tutorial: https://youtu.be/7KNABcF-xz0

Output

Preloader
Preloader animation

After preloader
After preloader

Source code

👉 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>Simple landing page</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="preloader"></div>
    </div>
    <header>
        <div class="logo">
            <b>Scoobcode</b>
        </div>
        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Blogs</a>
            <a href="#">Contact</a>
        </nav>
    </header>
    <section>
        <h1>
            Welcome to the world
        </h1>
        <div class="btn">
            <input type="button" value="Join">
            <input type="button" value="Read more">
        </div>
    </section>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/nulzVedhSRE" 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/nulzVedhSRE" 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/nulzVedhSRE" 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/nulzVedhSRE" 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/nulzVedhSRE" 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/nulzVedhSRE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    
        <b>Copyright 2021 &copy - develop by Scoobcode</b>
    </footer>

    <!-- preloader javascript code here  -->

    <script>
        var loader = document.getElementById("preloader");
        window.addEventListener("load", function () {
            loader.style.display = "none";
        })
    </script>

</body>

</html>

👉 CSS

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
body{
    background-image: linear-gradient(rgb(0,0,0,0.4), rgb(0,0,0,0.4)), url(bg.jpg);
    background-position: center;
    background-size: cover;
    height: 100vh;
}


/* Header here  */

header{
    display: flex;
    justify-content: space-around;
    padding: 20px;
}
header b{
    font-size: 30px;
    color: white;
}

header a{
    font-size: 20px;
    color: white;
    padding: 5px 20px;
    position: relative;
    top: 8px;
}
header a:hover{
    background-color: white;
    color:black;
    border-radius: 5px;
}

/* section here  */

section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 90vh;
}
section h1{
    font-size: 50px;
    color: white;
}

section .btn{
    margin-top: 20px;
}
section input{
    padding: 10px 20px;
    margin: 0px 10px;
    font-size: 18px;
    background-color: transparent;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}
section input:hover{
    background-color: white;
    color: rgb(0, 0, 0);
    border-radius: 5px;
}

/* footer here  */
footer{
    text-align: right;
    color: white;
    padding: 10px 30px;
}

/* Preloader here  */

#preloader{
    background: white url(Gear.gif) no-repeat center center;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 10;

}

👉 JavaScript (You can only copy this)

        var loader = document.getElementById("preloader");
        window.addEventListener("load", function () {
            loader.style.display = "none";
        })

You can support me to like this blog and share it with your programmer friends. Go to my youtube channel scoobcode and watch the full tutorial video.

Comments

Popular posts from this blog

Create social media icon hover effect using HTML and CSS - scoobcode

Here in this blog, we going to learn how to create social media icon hover effect using only HTML & CSS. Make social media icons more attractive. Here I use Fontawesome for social media icons. Full video tutorial:  https://youtu.be/Ks2AHt3e_BM Fontawesome:  https://fontawesome.com Note: Copy the code and make your own design. Also, go to our YouTube channel for more useful content. Source code 👉 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">     <link rel="stylesheet" href="style.css">     <script src="https://kit.fontawesome.com/e326c3f2a0.js" crossorigin="anonymous"></script>     <title>Hover effect</title> </head> <body>          <div class=&quo

Make profile card design with hover effect using HTML and CSS - scoobcode

This blog will show you how to make a profile card design with a hover effect using HTML and CSS. Profile card is used for a short introduction for a specific person. Full video tutorial:  https://youtu.be/9XXMJAuquCI Resources:  https://github.com/scoobcode/profile_card_design.git Note: Copy the code and make your own design. Also, go to our YouTube channel for more useful content. Source code 👉  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>Info-card</title>     <link rel="stylesheet" href="style.css">     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUB

Create responsive NavBar using HTML and CSS (No JavaSccript) - scoobcode

Here in this blog, we will learn how to create a responsive navbar in just some line of HTML and CSS code. No need for javascript for the design.  Full tutorial video:  https://youtu.be/JmcN_f7aKd8 Output Desktop View Mobile View Source code 👉  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>Responsive NavBar</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <header>         <b class="logo">Scoobcode</b>         <input type="checkbox" name="" id="tapmenu">         <label for="tapmenu" class="tapnav">             <span></span>             <span></