This is a rotating animation of small circular balls arranged in a perfect circle using JavaScript, CSS, and HTML.
The balls continuously rotate around a central point, simulating a pre-loader or loading animation seen in modern apps and websites.
- HTML
- CSS (Positioning, Border-radius)
- JavaScript (Math,
requestAnimationFrame
, Trigonometry)
- Dynamic ball positioning using
Math.sin()
andMath.cos()
- Smooth rotation animation using
requestAnimationFrame()
- Clean and minimal UI with center alignment
- How to use angles and radians to position elements in a circle
- How to animate using rotation and trigonometry
- Real-world use of
requestAnimationFrame()
for smooth animations

Coming Soon (GitHub Pages)
- Clone the repo
- Open
index.html
in your browser