In this article, we will see how to make a 3d spinner in CSS. This project has a number of bars which will have different amount of sizes and also these bars will rotate with cool animation. It is going to be a beginner-friendly project, as always. Also, we will make this project with only CSS.
Pre-requisites of 3D Spinner in CSS
- Basic knowledge of HTML.
- Basic knowledge of CSS and CSS animations.
Creating HTML Markup and Default Values
<!DOCTYPE html>
<html>
<head>
<title>3D Spinner</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar10"></div>
</div>
</body>
</html>body{
margin: 0;
padding: 0;
background-color: #262626;
}Now First of all, we will add HTML code for the structure of course. For that we have added a div with container class which will have another 10 div to 10 bars, now for CSS, we have just removed default margin and padding, and also, we have assigned #262626 color to background of the body.
Adding Bars
.container{
height: 580px;
width: 380px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.container>div{
position: relative;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
margin-bottom: 20px;
}
.bar1,.bar2,.bar3,.bar4,.bar5{
border-top: 40px solid white;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
}
.bar6,.bar7,.bar8,.bar9,.bar10{
border-bottom: 40px solid white;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
}Now we need to add style container first, in this container we have gave some height, width, and margin to assign some space for containers, and we will add here bars. Then we have used position to absolute in the container class, and position to relative to divs in the container class with this container’s position will be fixed. And div which are present in the container have relative position, so divs won’t come out of the container, instead they will shift into another row.
Then we have added transform-style to preserve-3d, so the all div can get 3D-effect if you assign. Also, we have added -webkit to target Chrome browser, so Chrome can run the 3D-effect on this.
Now we have selected top 5 bars, in which we have added 40px white border from top, also we have cut edge from left and right using transparent property. So our bars will have diagonal cut at the edges. Same, we have done for bottom 5 bar, but we have added edge from bottom.
Reforming The Bars and Adding Animations
.container{
height: 580px;
width: 380px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
perspective: 800px;
-webkit-perspective: 800px;
}
.bar1,.bar2,.bar3,.bar4,.bar5{
border-top: 40px solid white;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
animation: flip 4s infinite forwards;
}
.bar6,.bar7,.bar8,.bar9,.bar10{
border-bottom: 40px solid white;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
animation: flip 4s infinite forwards;
}
@keyframes flip{
100%{
transform: rotateY(-180deg);
}
}
.bar1{
width: 300px;
border-top-color: #f05a31;
}
.bar2{
width: 240px;
border-top-color: #e6215b;
left: 30px;
animation-delay: .2s;
}
.bar3{
width: 180px;
border-top-color: #c62283;
left: 60px;
animation-delay: .4s;
}
.bar4{
width: 120px;
border-top-color: #642a89;
left: 90px;
animation-delay: .6s;
}
.bar5{
width: 0px;
border-top-color: #1875be;
left: 150px;
animation-delay: .8s;
}
.bar6{
width: 0px;
border-bottom-color: #05a296;
left: 150px;
animation-delay: 1s;
}
.bar7{
width: 120px;
border-bottom-color: #87c63c;
left: 90px;
animation-delay: 1.2s;
}
.bar8{
width: 180px;
border-bottom-color: #fbb233;
left: 60px;
animation-delay: 1.4s;
}
.bar9{
width: 240px;
border-bottom-color: #f15a2f;
left: 30px;
animation-delay: 1.6s;
}
.bar10{
width: 300px;
border-bottom-color: #e6215b;
animation-delay: 1.8s;
}Now we have gave some width in decreasing order for top 5 bar and also, we have added some random colors to them. Then we have added width in decreasing order for the bottom 5 bars, and also we have added some random colors to them. Also, we have added left property to each of the bar to reposition to center each bar.
Now we need to add animation, we have used animation named flip for 4 seconds duration, for infinite times. We have defined the animation using @keyframes, in this we have just rotated our bars to -180 degrees in Y-Axis, it will flip vertically. Then after, we have added some delay to each of the bar, so animation will be run 0.2 second late on each of the bar.
Now lastly we have added perspective to container with 800px. The perspective property is used to give a 3D-positioned element some perspective. If we reduce it by some pixels, then you can feel some visual changes.
Full Source Code of 3D Spinner in CSS
index.html
<!DOCTYPE html>
<html>
<head>
<title>3D Spinner</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar10"></div>
</div>
</body>
</html>style.css
body{
margin: 0;
padding: 0;
background-color: #262626;
}
.container{
height: 580px;
width: 380px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
perspective: 800px;
-webkit-perspective: 800px;
}
.container>div{
position: relative;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
margin-bottom: 20px;
}
.bar1,.bar2,.bar3,.bar4,.bar5{
border-top: 40px solid white;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
animation: flip 4s infinite forwards;
}
.bar6,.bar7,.bar8,.bar9,.bar10{
border-bottom: 40px solid white;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
animation: flip 4s infinite forwards;
}
@keyframes flip{
100%{
transform: rotateY(-180deg);
}
}
.bar1{
width: 300px;
border-top-color: #f05a31;
}
.bar2{
width: 240px;
border-top-color: #e6215b;
left: 30px;
animation-delay: .2s;
}
.bar3{
width: 180px;
border-top-color: #c62283;
left: 60px;
animation-delay: .4s;
}
.bar4{
width: 120px;
border-top-color: #642a89;
left: 90px;
animation-delay: .6s;
}
.bar5{
width: 0px;
border-top-color: #1875be;
left: 150px;
animation-delay: .8s;
}
.bar6{
width: 0px;
border-bottom-color: #05a296;
left: 150px;
animation-delay: 1s;
}
.bar7{
width: 120px;
border-bottom-color: #87c63c;
left: 90px;
animation-delay: 1.2s;
}
.bar8{
width: 180px;
border-bottom-color: #fbb233;
left: 60px;
animation-delay: 1.4s;
}
.bar9{
width: 240px;
border-bottom-color: #f15a2f;
left: 30px;
animation-delay: 1.6s;
}
.bar10{
width: 300px;
border-bottom-color: #e6215b;
animation-delay: 1.8s;
}Output
