How to Create a Spinning Animation Around a Circle Using JavaScript?

Estimated read time 1 min read

Here is an example of creating a spinning animation around a circle using JavaScript:

HTML:

<div id="circle"></div>

CSS:

#circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript:

const circle = document.getElementById("circle");
let angle = 0;

setInterval(function () {
  angle += 5;
  circle.style.transform = `rotate(${angle}deg)`;
}, 50);

This code uses the setInterval method to rotate the circle element by 5 degrees every 50 milliseconds. The CSS sets the initial size, shape, and position of the circle element, and the JavaScript updates its transform property to rotate it.

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply