Newton Sun and Moon Loader using HTML, CSS & JavaScript

The Newton Sun and Moon Loader is a visually engaging web animation that mimics the iconic motion of Newton’s Cradle — but with a twist. Instead of metal spheres, it uses animated representations of the Sun and Moon swinging in balance. Created using HTML, CSS animations, and JavaScript, this loader is ideal for creative websites, space-themed apps, or unique portfolio preloaders.

This celestial motion graphic demonstrates smooth physics-inspired movement with a playful UI approach that remains both aesthetic and lightweight.

🧰 Technologies Used:

• HTML5 – To structure the loader container and visual elements

• CSS3 – For styling, transitions, and animations (swing, bounce, shadow)

• JavaScript – To add control, timing sync, and logic for interactive motion

🎬 How It Works (Plain Text):

The animation begins with the Sun on one side and the Moon on the other. When the loading screen starts, the Sun swings upward and releases, triggering the Moon to swing in response, simulating a Newton’s Cradle effect. CSS handles the swing animations using transform and keyframes, while JavaScript synchronizes the timing and alternates the motion in a loop. JavaScript also helps add randomness or smooth easing between transitions. The loader repeats seamlessly, creating a relaxing celestial rhythm.

🧠 Learning Highlights:

• Synchronizing motion between two elements using JavaScript

• Simulating real-world physical movement (Newton’s Cradle)

• Animating celestial objects using HTML and CSS

• Enhancing user engagement through visually pleasing loading effects

🛠 Customization Ideas:

• Add stars, comets, or a galaxy background

• Add sound effects or subtle glow on each swing

• Convert into a full-screen loading overlay with text

• Allow user to click and release the Sun or Moon