CSS Animation Examples | Vertical Ball CSS Loader

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

Looking for a modern and smooth CSS loader to enhance your website’s loading experience? This Vertical Ball Loader is a simple yet elegant CSS animation example that you can easily integrate into your projects. It features multiple balls moving vertically with a smooth ease-in-out animation, creating a dynamic and visually appealing loading effect. The loader is fully centered, responsive, and works seamlessly in Chrome.

This project is perfect for anyone exploring CSS loader examples, CSS loading animations, or learning from CSS animation examples with source code. You can customize the loader’s color, size, and animation duration to match your website’s theme.

You can download the complete source code. It’s lightweight, easy to understand, and ready for your projects.

 

Source Code Explanation

◈ Body Styling – Centers the loader in the viewport using flexbox and sets a background color that matches the loader design.

◈ .main Container – Wraps the loader elements and ensures they are perfectly centered with flexbox alignment.

◈ .loaders & .loadersB Containers – These are the main wrapper elements for the loader bars, keeping all loader items aligned in a row.

◈ .loader – Defines the base vertical bar, sets the size, rounded edges, and background color for the loader.

◈ .loader:after – Creates the top half effect with shadows and gradient masking, giving a 3D embossed appearance.

◈ .loader::before – Adds the bottom half with similar shadow and masking, creating a mirrored effect for depth.

◈ .loaderA – A transparent wrapper for the moving balls, holding them in place while the animation runs.

◈ .ball0 to .ball9 – These are the animated balls. They have circular shape, shadows for 3D look, and are assigned the vertical animation.

◈ Animation Keyframes (@keyframes move) – Defines the vertical motion of each ball, moving them from top to bottom and back smoothly.

◈ Rotation & Animation Delays – Each loader is rotated differently for a spread effect, and each ball has a staggered animation delay to create a flowing, dynamic loading sequence.

 

body {
background: #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}

.main {
display: flex;
align-items: center;
justify-content: center;
}

.loaders,
.loadersB {
display: flex;
align-items: center;
justify-content: center;
}

.loader {
position: absolute;
width: 1.15em;
height: 13em;
border-radius: 50px;
background: #e0e0e0;
}

.loader:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 1.15em;
height: 5em;
background: #e0e0e0;
border-radius: 50px;
border: 1px solid #e2e2e2;
box-shadow: inset 5px 5px 15px #d3d2d2ab,
inset -5px -5px 15px #e9e9e9ab;
mask-image: linear-gradient(to bottom, black calc(100% - 48px), transparent 100%);
}

.loader::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 1.15em;
height: 4.5em;
background: #e0e0e0;
border-radius: 50px;
border: 1px solid #e2e2e2;
box-shadow: inset 5px 5px 15px #d3d2d2ab,
inset -5px -5px 15px #e9e9e9ab;
mask-image: linear-gradient(to top, black calc(100% - 48px), transparent 100%);
}

.loaderA {
position: absolute;
width: 1.15em;
height: 13em;
border-radius: 50px;
background: transparent;
}

.ball0,
.ball1,
.ball2,
.ball3,
.ball4,
.ball5,
.ball6,
.ball7,
.ball8,
.ball9 {
width: 1.15em;
height: 1.15em;
border-radius: 50%;
background-color: rgba(232, 232, 232, 1);
box-shadow: rgba(0, 0, 0, 0.17) 0px -10px 10px 0px inset,
rgba(0, 0, 0, 0.15) 0px -15px 15px 0px inset,
rgba(0, 0, 0, 0.1) 0px -40px 20px 0px inset,
rgba(0, 0, 0, 0.06) 0px 2px 1px,
rgba(0, 0, 0, 0.09) 0px 4px 2px,
rgba(0, 0, 0, 0.09) 0px 8px 4px,
rgba(0, 0, 0, 0.09) 0px 16px 8px,
rgba(0, 0, 0, 0.09) 0px 32px 16,
0px -1px 15px -8px rgba(0, 0, 0, 0.09);
transition: transform 800ms cubic-bezier(1, -0.4, 0, 1.4);
animation: 3.63s move ease-in-out infinite;
}

@keyframes move {
0% { transform: translateY(0em); }
50% { transform: translateY(12em); }
100% { transform: translateY(0em); }
}

You can download the complete source code. It’s lightweight, easy to understand, and ready for your projects.

 

This Vertical Ball Loader is a simple, elegant CSS animation that enhances user experience while pages load. It is fully responsive, visually appealing, and easy to integrate. With this project, you can learn and implement advanced CSS loader effects and create smooth animations for modern websites.