Create a Stylish Wavy Loader Animation with CSS

Loading animations are an essential part of modern web design, especially when it comes to improving user experience. Instead of leaving users staring at a blank screen, a good loader gives them visual feedback that something is happening.

In this post, you’ll learn how to create a stylish wavy loader using only HTML and CSS — no JavaScript required. This loader features rotating waves and a subtle fill effect, accompanied by a “Loading…” text at the center. It’s lightweight, visually engaging and perfect for any modern interface.

Whether you’re building a web app, portfolio or a landing page, this loader will add a polished touch to your design. Let’s dive into how it works and how to build it from scratch.

HTML Markup

We’ll keep the HTML simple. A single container holds the loader and the loader contains a centered loading message.

<div class="main-container">
    <div class="loader">
        <div class="loading-text">Loading...</div>
    </div>
</div>

• .main-container: A full-screen flex container to center the loader.
• .loader: The animated circular loader.
• .loading-text: Positioned text overlayed at the center of the loader.

This layout makes the loader fully modular and easy to integrate anywhere in your UI.

CSS Styling and Animations

This is where the magic happens. We combine radial gradients, inset shadows, CSS ::before and ::after pseudo-elements and keyframe animations to simulate a wavy fill and rotation.

.main-container {
    display: flex;
    min-width: 250px;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

.loader {
    width: 200px;
    height: 200px;
    display: flex;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    align-items: center;
    font-family: 'calibri';
    justify-content: center;
    background: radial-gradient(#4f4e4e, transparent);
    box-shadow: 0 0 100px 20px rgba(0, 0, 0, 0.5) inset, 0 0px 50px 20px rgb(84 84 84 / 32%);
}

.loading-text {
    z-index: 1;
    color: #a2a2a2;
    font-weight: bold;
    position: absolute;
    letter-spacing: 1px;
    text-shadow: 0 0 20px #777777;
}

.loader::before,
.loader::after {
    content: '';
    bottom: 0%;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    animation: wavy 3s linear infinite, fill 10s linear infinite;
}

.loader:before {
    border-radius: 30%;
    background: rgb(206 206 206 / 33%);
}

.loader:after {
    border-radius: 40%;
    background: #424242;
}

@keyframes wavy {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fill {

    to {
        bottom: 110%;
    }
}

• We have used the ::before and ::after pseudo-elements to create animated inner shapes.
• We define two animations:
  • wavy: rotates the shape
  • fill: simulates a rising fill effect
• Each shape rotates and moves upward over time, creating a dynamic layered effect that looks fluid and engaging.

These animations combined with varying border-radius and transparency create an effect where the shapes rotate continuously while moving upward, giving the illusion of water or wave movement.

This wavy loader is not just visually satisfying — it’s also:

• Lightweight: Only uses HTML and CSS
• Responsive: Easily scales with different screen sizes
• Customizable: Modify colors, size, speed and more
• Framework-Free: No external dependencies or JS

Customization Tips

Want to make it your own? Here’s how:

• Change background color: Tweak the radial-gradient() and box-shadow colors.
• Adjust rotation speed: Change wavy animation duration (e.g., 3s → 1.5s).
• Add multiple wave layers: Clone and stack more ::before/::after elements.
• Resize loader: Update the width and height of .loader.

Conclusion

Now you know how to create a rotating wavy loader with a fill effect using pure HTML and CSS. This loader combines smooth animations, minimal code and a beautiful design — making it a valuable addition to your frontend UI toolkit.

You’ve practiced:

• CSS animation
• Pseudo-elements (::before, ::after)
• Layered gradient design
• Creative use of keyframes

Use it as-is or evolve it into a more complex loader based on your project needs.

Happy coding! Keep your UIs clean, fast and fun.