Description: Animated dot spinning around a word that can be used as animated logo or as a loader.
Dependencies: None
Mobile support: Yes
Live:
Spin
ner
Code:
style.css
.container {
width: min-content;
height: 80px;
font-size: 60px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: rgb(18, 92, 28);
margin: 20px;
padding: 30px;
background-color: rgb(197, 197, 197);
}
.word {
display: flex;
}
.above {
z-index: 2;
}
.below {
z-index: 0;
}
.ring {
display: block;
width: 100px;
height: 45px;
border-radius: 50%;
border: 2px rgb(255, 255, 255) solid;
transform: rotate(-45deg);
position: relative;
top: -55px;
left: 70px;
}
.dot {
animation: yloop 1s infinite ease-in;
}
.dot::after {
content: "";
display: block;
width: 5px;
height: 5px;
position: relative;
top: -46px;
left: 80px;
border-radius: 20px;
background-color: #fff;
animation: xloop 1s infinite ease-out;
}
@keyframes xloop {
40% {
width: 20px;
height: 20px;
}
50% {
animation-timing-function: ease-out;
transform: translateX(72px);
}
}
@keyframes yloop {
50% {
animation-timing-function: ease-in;
transform: translateY(-80px);
}
}index.html
<!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" />
<link rel="stylesheet" href="style.css">
<title>Spinner</title>
</head>
<body>
<div class="container">
<div class="word">
<span class="above"> Spin </span>
<span class="below"> ner </span>
</div>
<div class="ring"></div>
<div class="dot"></div>
</div>
</body>
</html>