Website loading animation using html and css

Taohedul Islam

501

This is the html and css code of website loading animation. that made using html and css you can use this code one you assignment project or portfolio i hope this code is helpful for your work

 <!DOCTYPE html>
<html lang="en">

<head>

    <title>Loading Animation</title>
</head>

<body>
    <div class='loader'>
     <div><div><div><div><div><div><div>
     </div></div></div></div></div>
   </div></div> 
</div>
   
</body>

</html>

Try it Yourself >>

 
        body {
          display: flex;
            height: 100vh;
            background-color: black;
            overflow: hidden;
            justify-content: center;
            align-items: center;
        }

        .loader {
            width: 200px;
            height: 200px;
            position: relative;
            border-radius: 50%;
        }

        div {
            height: 100%;
            width: 100%;
            border-radius: 50%;
            box-sizing: border-box;
            border-top: 0.2em solid #fff;
            border-bottom: 0.2em solid #fff;
            border-left: 0.2em solid chartreuse;
            border-right: 0.2em solid coral;
            animation: spin 10s infinite linear;
        }
        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }
            50%{
                transform: rotate(180deg);
            }
            100% {
                transform: rotate(90deg);
            }
        }

Try it Yourself >>