Awesome Animated Preloader Using HTML, CSS, JQuery

Awesome Animated Preloader Using HTML, CSS, JQuery

In this video, you are going to learn how to create a Dark Theme Awesome Animated preloader screen for your website using HTML, CSS, Jquery.

In this video, you are going to learn how to create a Dark Theme Awesome Animated preloader screen for your website using HTML, CSS, Jquery.

Subscribe: https://www.youtube.com/channel/UCNDmzGYwwT3rdY3xQuW8QOA

Source code

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Preloader</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>

    <div class="loader_bg">
        <div class="loader"></div>
    </div>

    <script type="text/javascript" src="preloader.js"></script>

</body>
</html>

style.css


body{
    margin: 0;
    padding: 0;
    background: url(background.jpg)no-repeat;
}

/*preloader css*/

.loader_bg{
    position: fixed;
    background: #333333;
    width: 100%;
    height: 100%;
}

.loader{
    width: 100px;
    height: 100px;
    top: calc(50vh - 50px);
    left: calc(50vw - 50px);
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
}

.loader::before{
    content:'';
    height: 30px;
    width: 30px;
    background: transparent;
    border-radius: 50px;
    border: 20px ridge;
    border-width: 25px;
    border-color: #2EE3E8 transparent;
    animation: load 1s infinite;
}

@keyframes load{
    50%{
        transform: rotatez(180deg);
    }
    100%{
        transform: rotatez(360deg);
    }
}

preloader.js

setTimeout(function(){
    $('.loader_bg').fadeToggle();
},1000);

html css jquery

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

Sidebar Menu Using Only HTML and CSS | Side Navigation BarHello friends, Today in this video you'll learn how to create a Sidebar Menu using HTML and CSS onl...

Responsive Footer Design using HTML, CSS & Bootstrap

Today, I am going to show you how to create a footer design using HTML, CSS and bootstrap. This is a Complete Responsive Footer Design.

How To Make An Image Gallery With CSS Reflection | HTML, CSS & jQuery Image Gallery

Learn How to make an Image gallery with HTML, CSS and jQuery, Create 3 Image Gallery with Image Reflection using CSS Reflection. Learn to make a 3D image slider using HTML, CSS and jQuery. We will add reflection on images using CSS that make this gallery design more beautiful.

Particles Effect in Background in HTML Website using HTML CSS JQuery

Particles Effect in Background in HTML Website using HTML CSS JQuery

HTML Tutorial For Beginners

In this article, we’ll tutorial the best ways for learning HTML to assist you on your programming journey.