Skip to content

A simple and smooth rotating balls loader animation using HTML, CSS, and JavaScript. Built with basic trigonometry and animation loop logic using requestAnimationFrame.

Notifications You must be signed in to change notification settings

likhithnd/-Rotating-Balls-Loader

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

3 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ”΅ Rotating Balls Loader

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.

πŸ› οΈ Technologies Used

  • HTML
  • CSS (Positioning, Border-radius)
  • JavaScript (Math, requestAnimationFrame, Trigonometry)

✨ Features

  • Dynamic ball positioning using Math.sin() and Math.cos()
  • Smooth rotation animation using requestAnimationFrame()
  • Clean and minimal UI with center alignment

🧠 What I Learned

  • 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

πŸ“Έ Preview

Screenshot 2025-07-12 211635

πŸ”— Live Demo

Coming Soon (GitHub Pages)

πŸ“‚ How to Run

  1. Clone the repo
  2. Open index.html in your browser

About

A simple and smooth rotating balls loader animation using HTML, CSS, and JavaScript. Built with basic trigonometry and animation loop logic using requestAnimationFrame.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published