CSS Animation Examples | Rolling Ball on Swing Bar CSS Loader

Last Updated: 2025-09-02 14:14:10

If you are looking for simple yet engaging CSS loader examples, this project is a perfect fit. The loader features a rolling white ball that balances on a swinging bar, creating a playful and smooth motion. The bar gently tilts back and forth while the ball rotates across it, giving a real sense of movement and fun.

This loader is fully built using CSS loading animations and does not require JavaScript. It’s lightweight, responsive, and easy to integrate into any project. You can use it for websites, web apps, or creative portfolios.

With a minimal design, it also works as a great css loader generator concept for modern projects. The best part is that you can customize colors, speed, and size to match your theme. You can download the complete source code.

Source Code Explanation

Here’s a detailed breakdown of the main parts of this CSS loader:

◈ Body Styling
We center the loader vertically and horizontally using Flexbox and add a soft background color to match the design.

◈ @keyframes for Bar
This defines how the bar swings. It rotates from -15 degrees to +15 degrees to create a swinging motion.

◈ Bar Styling
The bar is styled with a width, height, rounded edges, and background color. The animation is applied here for the swing effect.

◈ @keyframes for Ball
This defines how the ball moves. The ball shifts horizontally from right to left while rotating to simulate rolling.

◈ Ball Styling
The ball is circular with a white background. It uses the ball animation to roll across the bar.

◈ Ball Positioning
The ball starts from the right side (left: calc(100% - 20px)) and moves left, ensuring smooth movement across the bar.

◈ Ball Rotation
The transform: rotate() inside keyframes makes the ball spin while moving, giving a realistic rolling effect.

◈ Ball After Element (::after)
A small black dot is added inside the ball using ::after. This makes the rolling effect visible by showing its rotation.

◈ Animation Timing
Both animations use ease-in-out for smooth starts and ends. The alternate property makes the ball go back and forth.

◈ Design Balance
The colors are chosen to create contrast—soft background, light bar, and a white ball—making the loader stand out while staying elegant.

/* This block centers the loader in the viewport */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: #fff4e6;
}

/* Animation for the swinging bar */
@keyframes up-down6123 {
  from {
    transform: rotate(-15deg);
  }
  to {
    transform: rotate(15deg);
  }
}

/* Styling the bar with swing animation */
.bar {
  width: 200px;
  height: 12.5px;
  background: #ffdaaf;
  border-radius: 30px;
  transform: rotate(-15deg);
  animation: up-down6123 3s ease-in-out 1s infinite alternate;
}

/* Animation for rolling ball */
@keyframes ball-move8234 {
  from {
    left: calc(100% - 40px);
    transform: rotate(360deg);
  }
  to {
    left: calc(0% - 20px);
    transform: rotate(0deg);
  }
}

/* Styling the ball */
.ball {
  position: relative;
  bottom: 50px;
  left: calc(100% - 20px);
  width: 50px;
  height: 50px;
  background: #ffffff;
  border-radius: 50%;
  animation: ball-move8234 3s ease-in-out 1s infinite alternate;
}

/* Adding a small rotating dot to the ball */
.ball::after {
  position: absolute;
  content: '';
  top: 25px;
  right: 5px;
  width: 5px;
  height: 5px;
  background: #000;
  border-radius: 50%;
}

You can download the complete source code.

 

The Rolling Ball on Swing Bar Loader is a great demonstration of how simple CSS animation examples can create engaging visual effects without complex coding. It’s smooth, minimal, and versatile for any web project. This loader also serves as inspiration if you are exploring css loader examples or creating your own css loader generator.