Animated Loader with Expanding Shapes Using HTML and CSS

This loader animation is a visually creative way to keep users engaged while content is loading. Built using only HTML and CSS, this animation features three layered shapes that expand, shift, and reshape themselves in a rhythmic sequence. The design is subtle yet dynamic, giving a polished feel to loading screens or transitional interfaces.

How the Loader Is Structured

The animation uses three overlapping elements, all stacked within a central container. These elements are placed exactly on top of each other, centered both horizontally and vertically on the screen. Each layer has a unique size, shape, and background color, creating depth and variation.

The first and largest layer sits in the back, the second one slightly smaller in the middle, and the third — the smallest — appears at the front near the bottom. Together, they animate in harmony, giving the illusion of a single, morphing unit.

The Animation Effect

Each layer runs a looping animation that changes its width, height, position, and border-radius. The overall result is a smooth, pulsating expansion that mimics a bouncing or breathing effect.

• The largest shape changes from a wide rectangle to a tall, narrow one, then shrinks down again.

• The middle shape follows a similar pattern but with slightly smaller dimensions and timing, keeping the visual flow layered and fluid.

• The smallest shape, located near the bottom, transforms dramatically — at times turning into a circle or even a horizontal line — adding character to the animation.

These changes are defined using CSS keyframes and timed with precision, so each transition feels natural and engaging.

Color and Depth

Each shape has its own color, ranging from a deep blue at the back to a soft teal at the front. These shades not only distinguish the layers but also create a sense of depth. The animation feels 3D-like without using any actual 3D techniques. By adjusting sizes and margins during the animation, the layers appear to move independently yet in sync.

Use Cases for This Loader

This type of animated loader is ideal for:

• Application loading screens

• Page transitions on modern websites

• Data fetching or form submission states

• Creative portfolios or design-heavy websites

Since it’s built entirely with HTML and CSS, there’s no need for external scripts or libraries. It loads quickly and works well across browsers and devices.

Visual Balance and Smooth Motion

What makes this loader visually appealing is the balance between its parts. None of the layers overpower the others. The motion is fluid, thanks to carefully selected easing functions, and the transitions happen at just the right intervals to keep the animation from feeling repetitive or abrupt.

Final Thoughts

This loader animation is a great example of how creative visuals can be achieved using just HTML and CSS. With layered shapes, fluid scaling, and smart timing, it adds both function and style to your site’s loading experience. It’s lightweight, fully customizable, and enhances the overall feel of your interface.