Skip to main content

How to make a simple loading effect for website | Source-Code

First, open your source code writer (Visual Studio Code) And type this code which is given below.

The loading effect is something like this.

loading animation



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>loading</title>
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Fredoka One', cursive;
        }
        html {
            font-size: 62.5%;
        }
        .main_div{
            width: 100vw;
            height: 100vh;
            background-color: #000;
            display: grid;
            place-items: center;
        }

        .center_div{
            width: 15rem;
            height: 15rem;
            position: relative;
           /* background-color: #fff;*/
        }

        .rot{
            width: 15rem;
            height: 15rem;
            position: absolute;
            border-right: 0.3rem solid #fff;
            border-radius: 50%;
            animation: rot 2s linear infinite;
        }

        @keyframes rot {
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }

        h1{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="main_div">
        <div class="center_div">
            <div class="rot"></div>
            <h1>
                loading
            </h1>
        </div>
    </div>
</body>
</html>

Thanks for coming our website !
Labels:

Comments

Post a Comment

Popular posts from this blog

Let us understand DevOps

What Will You Learn ? DevOps is a set of practices that combines software development (Dev) and IT operations (Ops) This article will get you started with the fundamentals of DevOps and understanding how to use it in real projects Understanding what DevOps is and why it's needed along with the basic terminologies Getting started with DevOps and understanding its architecture and lifecycle Introduction to Git and it's basic commands Introduction to Docker, Docker container and it's related concepts Getting started with Jenkins and understanding how to integrate it with Github Basics of Selenium and Nagios Who is the target audience ? Students and industry professionals who wish to get hands-on something called DevOps Users who wish to learn how to integrate the processes between software development IT teams and manage various projects Benefits Improved operational support and faster fixes Good processes across IT and teams, including automation Increased team flexibility an...
8 comments
Read more

What is Hard Disk? Definition, functions and types.

In this article, you will know what is Hard Disk and what are these types? Hard disks are also often called Disk drive or "Hard Disk Drive (HDD)". Just as a library is required to handle books in the library, the same computer also needs a similar place in which it can store digital data .  Computers use two types of storage devices to store and process digital content (Document, Image, Videos, Software, Operating system, Program). In which Hard Disk is a secondary memory device. It keeps the data stored permanently. Whereas the primary memory device (RAM) serves to process the program of the computer . It is also called temporary memory. Hard Disk is seen as an important component of a computer because no computer will work without it. In this post we will tell you what is a hard disk in a computer ? In which you will get to know a lot about Hard Disk. So let's first know, what is called a hard disk and then we will talk about other aspects of it. What is hard disk ...
4 comments
Read more

Artificial Intelligence

Artificial Intelligence When we prepare a computer in such a way that it can act like a human's intelligence, it is called artificial intelligence says that when we set a program in a machine that it can work like human so where does he go to artificial intelligence . To understand AI it is necessary to understand these 6 words Visual Perception Speech Recognition Decision Making Language Translation Knowledge Reasoning Ability According to John Macatha's father of Artificial Intelligence, It is the science and engineering of making intelligent machines especially intelligent computer programs.  Artificial Intelligence is a way to build a computer, a computer-controlled robot, or a software intelligence. Things, just as intelligent people think. A.I is studied by the fact that humans how the brain thinks, and how humans learn, decide, and try to solve a problem work, and then the results of this study based on developing intelligent software and system use. The goal of Artific...
2 comments
Read more