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.

<!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 !