How to Make Beautiful kinetic loading effect for apps and desktop application - HTML & CSS

Easy Learning January 31, 2022



1. Create a File Name: index.html and paste below code


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kienatic effect</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
        <div class="kienatic"></div>
</body>
</html>
2. Create CSS file with name Style.css and pasted below code there. 

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

.kienatic {
    width: 80px;
    height: 80px;
    position: relative;
}
.kienatic::before, .kienatic::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: #fff;
    
    animation: rotateA 2s linear infinite .5s;

}

.kienatic::before{
    transform: rotate(90deg);
    animation: rotateB 2s linear infinite;
}
@keyframes rotateA {
    0%, 25% {
        transform: rotate(0deg);
    }
    
   50%, 75% {
        transform: rotate(180deg);
    } 

    100% {
        transform: rotate(360deg);
    } 
}
@keyframes rotateB {
    0%, 25% {
        transform: rotate(90deg);
    }
    
   50%, 75% {
        transform: rotate(270deg);
    } 

    100% {
        transform: rotate(450deg);
    } 
}
Done Save it and Run this code.....
Tags:

Post a Comment

0 Comments