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

Post a Comment

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
Post a Comment
Read more

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
Post a Comment
Read more

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></
Post a Comment
Read more