css3-simple loading animation

Knowledge points

border-top-color: Set the color of the top border
The top, left, bottom, and right values are specified at the same time. Note that when width and height are not set, there will be the same distance from the top, bottom, left, and right of the parent element, so that vertical and horizontal centering can be achieved. It is equivalent to the effect of proportional zoom, check related blogs, big guys blog

effect

Insert picture description here

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>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div></div>
    
</body>
</html>

*{
    
    
    margin: 0;
    padding: 0;
}

body{
    
    
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgb(29, 20, 20);
}

div{
    
    
    height: 100px;
    width: 100px;
    border: 3px solid transparent;
    border-top-color: rgba(13, 113, 228, 0.877);
    border-radius: 50%;
    position: relative;
    animation: donghua 2.4s linear infinite;
}

div::before{
    
    
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 3px solid transparent;
    border-top-color: rgba(245, 80, 3, 0.904);
    border-radius: 50%;
    animation: donghua 2s linear infinite;
}

div::after{
    
    
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 3px solid transparent;
    border-top-color: rgba(55, 217, 245, 0.897);
    border-radius: 50%;
    animation: donghua 2.3s linear infinite;
}

@keyframes donghua{
    
    
    0%{
    
    
        transform: rotate(0);
    }
    100%{
    
    
        transform: rotate(720deg);
    }
}

css3-simple loading animation

Knowledge points

effect

Code

Guess you like