We are going to show how to create a simple circle spinning around its center.

## Create HTML

• Create a <div> with a class name "spin" in the body section.
``````<body>
<div class="spin"></div>
</body>``````

• Create a circle setting the width and the height of it.
• Set the border-radius to 50% to make it rounded.
• Give color to the border.
• Give color to the spinner with the border-bottom-color property.
• Specify the animation, which has four values. The first value is the animation-duration which is 1.5s, meaning the length of time that animation takes to complete one cycle. The second value is the animation-timing-function which is set to linear meaning the animation has the same speed throughout the animation. We set the animation-iteration-count to infinite so that the animation plays endlessly. The final value is the animation-name.
• Set the position to "absolute" so as to position the element relative to its closest positioned ancestor.
• Specify the top and left positions of the spinner.
• Define the transform translate3d, which is a 3D transform function used to move an element in 3D space. It translates the element by a vector [tx, ty, tz]: tx is the translation along the x-axis, ty is the translation along the y-axis, and tz is the translation along the z-axis. And define the rotate() function used to rotate an element in the 2D space.
``````.spin::before {
animation: 1.5s linear infinite spinner;
animation-play-state: inherit;
border: solid 5px #cfd0d1;
border-bottom-color: #1c87c9;
content: "";
height: 40px;
position: absolute;
top: 10%;
left: 10%;
transform: translate3d(-50%, -50%, 0);
width: 40px;
will-change: transform;
}``````

Here’s the final result of our code.

``````<!DOCTYPE html>
<html>
<title>Title of the document</title>
<style>
@keyframes spinner {
0% {
transform: translate3d(-50%, -50%, 0) rotate(0deg);
}
100% {
transform: translate3d(-50%, -50%, 0) rotate(360deg);
}
}
.spin::before {
animation: 1.5s linear infinite spinner;
animation-play-state: inherit;
border: solid 5px #cfd0d1;
border-bottom-color: #1c87c9;
content: "";
height: 40px;
width: 40px;
position: absolute;
top: 10%;
left: 10%;
transform: translate3d(-50%, -50%, 0);
will-change: transform;
}
</style>
<body>
<div class="spin"></div>
</body>
</html>``````

### Result

``````<!DOCTYPE html>
<html>
<title>Title of the document</title>
<style>
body {
margin-top: 100px;
background-color: #0042A4;
color: #fff;
text-align: center;
}
h1 {
font: 1.5em 'Roboto', sans-serif;
margin-bottom: 30px;
}
.spin {
display: inline-block;
width: 50px;
height: 50px;
border: 3px solid rgba(255, 255, 255, .3);
border-top-color: #fff;
animation: spin 1s ease-in-out infinite;
-webkit-animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(360deg);
}
}
</style>
<body>
<div class="spin"></div>
</body>
</html>``````

``````<!DOCTYPE html>
<html>
<title>Title of the document</title>
<style>
.spin {
border: 16px solid #0042A4;
border-top: 16px solid #3775CF;
border-right: 16px solid #619BEE;
border-bottom: 16px solid #96BFF9;
border-left: 16px solid #C9E0FF;
width: 50px;
height: 50px;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<body>
<div class="spin"></div>
</body>
</html>``````

``````<!DOCTYPE html>
<html>
<title>Title of the document</title>
<style>
body,
html {
background: #002F74;
}
.spin-container {
text-align: center;
margin-top: 100px;
}
.spin {
border: 3px solid #0D4B9F;
width: 200px;
height: 200px;
margin: 0 auto;
border-left-color: transparent;
border-right-color: transparent;
animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}
border: 3px solid #E0EDFF;
width: 220px;
height: 220px;
position: relative;
top: -216px;
border-left-color: transparent;
border-right-color: transparent;
animation: rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}
border: 3px solid #005CDC;
width: 240px;
height: 240px;
position: relative;
top: -452px;
border-left-color: transparent;
border-right-color: transparent;
animation: rotate 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}
border: 3px solid #94B6E5;
width: 260px;
height: 260px;
position: relative;
top: -708px;
border-left-color: transparent;
border-right-color: transparent;
animation: rotate2 2s cubic-bezier(0.26, 1.36, 0.74, -0.29) infinite;
}
@keyframes rotate {
0% {
transform: rotateZ(-360deg)
}
100% {
transform: rotateZ(0deg)
}
}
@keyframes rotate2 {
0% {
transform: rotateZ(360deg)
}
100% {
transform: rotateZ(0deg)
}
}
#text {
color: #D6E3F6;
font-family: Arial;
font-size: 15px;
position: relative;
top: -857px;
}
</style>