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

Automate Google chrome dino game for unlimited score using JavaScript - scoobcode

Dino game is one of the most popular games developed by google. It's a browser-based offline game. Whenever the score increases this game will be more difficult for players. Here in this blog, I will give a single line of code to automate this game for unlimited scores. Full video tutorial:  https://youtu.be/ti3bYMWRb1k Note: Copy the code and make your own design. Also, go to our YouTube channel for more useful content. Steps Click on the right button of the mouse and select Inspect option Then go to the Console tab Write the code or copy the code from the bellow section and paste in the  Console tab Source code 👉  JavaScript Runner.instance_.gameOver = () => {} 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.
Post a Comment
Read more

Add google font in website | how to insert custom font in website - scoobcode

As per the requirement sometimes web developers have to use an external custom font style. And this requirement can be fulfilled by Google font. There have many websites to fulfill the requirement. But the reason behind why I choose this place because google font most user-friendly, fast, and reliable. Here in this blog, I will share some steps to add google font to your website code. Also, I had already uploaded the full video tutorial on our YouTube channel. You can also check out our video. Full video tutorial:  https://youtu.be/qNT-pli5qTM Note: Copy the code and make your own design. Also, go to our YouTube channel for more useful content. Steps Step 1: Search Google font in any browser or go to this link  font.google.com Step 2: After opening the website choose any font face Step 3: Select any font style Step 4: Two way of getting code Step 5: Copy the link and paste your HTML code (Method 1) Step 6: Paste the code in your HTML file Step 7: Add the CSS code Step 8: Check the outp
Post a Comment
Read more