Source codes:
<!DOCTYPE html>
<html>
<head>
<title> </title>
<style type=”text/css”>
@property –progress{
syntax: “<percentage>” ;
inherits: true;
initial-value: 0%;
}
:root{
–c1:#6eccee;
–c2:#f672ca;
–c3:#fdb428;
–c4:#b9f;
}
@keyframes progress{
from {
–progress:0%;
}
to{
–progress:100%;
}
}
.circle{
–progress:60%;
// check if the browser supports the
@property (Houdini API) animation, then start with 0
@supports (background: paint(houdini)){
–progress:0%;
}
background: conic-gradient(at center,
var(–c1)
var(–progress),
black var(–progress),
var(–c2) calc(var(–progress) + 20% ),
var(–c3) calc(var(–progress) + 30% ),
var(–c4) calc(var(–progress) + 50%),
transparent,
transparent,
transparent,
transparent
);
animation: progress 4s linear infinite;
border-radius: 50%;
mask: radial-gradient(circle at center, transparent 65%, black 65%);
position: absolute;
inset: 0;
&:nth-child(2){
inset:4vmin;
animation-delay: 1s;
}
&:nth-child(3) {
inset: 8vmin;
animation-delay: 0.5s;
}
}
.container{
filter: drop-shadow(0 0 0.8vmin hsla(0, 0, 0%, 1));
position: relative;
width: 40vmin;
aspect-ratio: 1;
&:after{
content: “DoolotTech ✨”;
font-weight: bold;
position: absolute;
font-size: 2.5vmin;
inset: 0;
color: white;
display: grid;
place-items: center;
}
}
body{
height: 100vh;
width: 100vw;
font-family: sans-serif;
background: radial-gradient(30% 40% at center, hsla(0, 0, 100%, 0.03), transparent), #111;
background: black;
color: var(–c1);
display: grid;
place-items: center;
}
</style>
</head>
<body>
<div class=”container”>
<div class=”circle”></div>
<div class=”circle”></div>
<div class=”circle”></div>
</div>
</body>
</html>
