Loading animation with css

September 28, 2023
Loading animation with css

CODE
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div class="container">
            <div class="loader">
                <div class="c1">
                    <div class="c2">
                        <div class="c3">
                            <div class="c4"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <style>
        :root {
      --radius : 5cm;
      --border-thickness: 7px;
    }
        body{
            background-color: black;
            height: 95vh;  
            width: 99vw;
            display: flex;
            justify-content: center;
            align-items: center;
    
        }
        .loader{
            height: var(--radius);
            width: var(--radius);
        }
        .c1, .c2, .c3, .c4{
            border-radius: 50%;
            border: var(--border-thickness) solid;           
            display: grid; 
            place-items: center;  
        }
        .c1{ 
            height: 100%;
            width: 100%; 
            border-radius: none;
            border-color:white;   
        }
        .c2, .c4{ 
            border-top-color: White;     
            border-bottom-color: White;  
            animation: spin2 1s infinite;
            animation-timing-function: linear; 
        }
        .c3 {
            height: 75%;
            width: 75%; 
            animation: spin1 1s infinite;
            animation-timing-function: linear;
            border-right-color: White;     
            border-left-color: White;  
            animation: spin1 2s infinite;
            animation-timing-function: linear;
        }
        .c2{
            height: 80%;
            width: 80%;
        }  
        .c4 {
            height: 60%;
            width: 60%; 
        }
        @keyframes spin1 {
            100%{
                transform: rotate(360deg); 
            }
        }
        @keyframes spin2 {
            100%{
                transform: rotate(-360deg); 
            }
        }
    </style>
    </html>
Search This Blog

Coderati

Loading animation with css

Comments

Post a Comment

Popular Posts

Password generator

Glowing Button
