A very common application in many sites while performing some actions like form submitting or opening of any popup is a rotating spinner. We can achieve this requirement with pure CSS. Here is an article that will guide you.
Structure of the project (HTML)
First, we have to plan the structure, and here we just need one container for the spinner. So I’m taking the div and making this an infinite spinner.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rotating spiiner with pure </title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="spinner"></div>
</body>
</html>CSS hack to achieve the goal
Here is the Designing part.
* {
box-sizing: border-box;
}
body {
background-color: #050d57;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
/* we are giving height and width of the container just to make it occupy it’s space*/
.spinner {
position: relative;
height: 80px;
width: 80px;
}
/* with before and after selectors we are doing this magic*/
.spinner::after,
.spinner::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
/* the border value is the actual logic behind the spinner */
border: 30px solid transparent;
border-radius: 50%;
border-bottom-color: #fff;
animation: rotatex 2s linear infinite 0.5s;
}
/* here we are giving infinite animation, if you need you can give the required time*/
.spinner::before {
transform: rotate(90deg);
animation: rotatey 2s linear infinite;
}
/* keyframes will help to make the animation*/
@keyframes rotatex {
0%,
25% {
transform: rotate(0deg);
}
50%,
75% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotatey {
0%,
25% {
transform: rotate(90deg);
}
50%,
75% {
transform: rotate(270deg);
}
100% {
transform: rotate(450deg);
}
}Results
Results without animation and logic.
You can find this project in my gitpages https://github.com/kosarajunavya/kosarajunavya.github.io/blob/main/spinner/index.html
Finally, I want to conclude that we have created a rotating spinner with pure CSS. we can add and remove the animation as per the requirement needed.
21 likes
Add to read list
Comments