Loading animaiton with CSS

September 09, 2023
Loading animaiton 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>CSS Loading animation</title>
</head>
<body>
    <div class="container">
        <div class="loader">
            <div class="a"></div>
            <div class="b"></div>
        </div>
    </div>
<style>
    body{
        margin: 0;
    }
    .container{
        width: 100vw;
        height:100vh; 
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: black;
    }
    .loader{
        height:100px;
        width: 100px; 
    }
    .a{
        height:80px;
        width: 80px;
        border-radius: 50%;
        border:10px solid transparent;
        border-top:10px solid white;
        border-bottom:10px solid white;
        position: relative;
        animation: spin1 2s infinite; 
        -webkit-animation: spin1 2s infinite; 
    }
    .b{
        height:50px;
        width: 50px; 
        border-radius: 50%;
        border:10px solid transparent;
        border-left:10px solid white;
        border-right:10px solid white; 
        position: relative;
        bottom:85px;
        left:15px; 
        animation: spin2 2s infinite;
        -webkit-animation: spin2 2s infinite;
    }
    @keyframes spin1{
        50%{
            transform: rotate(360deg);
        }
    }
    @keyframes spin2{
        50%{
            transform: rotate(-360deg);
        }
    }
    @-webkit-keyframes spin1{
        50%{
            -webkit-transform: rotate(360deg);
        }
    }
    @-webkit-keyframes spin2{
        50%{
            -webkit-transform: rotate(-360deg);
        }
    }
</style>  
</body>
</html>
Search This Blog

Coderati

Loading animaiton with CSS

Comments

Post a Comment

Popular Posts

Password generator

Glowing Button
