Crafting a wavy Loading Animation with HTML and CSS Magic

Loading animations are a crucial element in web design, providing visual feedback to users while content is being fetched or processed. In this tutorial, we'll walk you through the process of creating a straightforward loading animation using HTML and CSS. By the end of this guide, you'll have a foundational understanding of how to implement loading animations for your web projects.

Must Read: Professional Loading animation using HTML, CSS and JavaScript

The provided HTML code structures a creative loading animation, which can be integrated into your web page.

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

The main container that can be positioned on your web page according to your requirement. Inside the main container, we have a loader container that holds our loading animation. Within the loader container, we have a simple "Loading..." text element. This text will be displayed to users while the content is loading.

Must Read: Realistic Candle Animation using HTML and CSS only

To style the loader, we have applied this CSS style.

.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%;
    }
}

By applying CSS styles, we've enhanced the visual appeal of our loading animation. We centered the loading text, provided a pleasing color scheme, and added a wavy effect to draw attention. Experiment with different colors, fonts, and animation speeds to tailor this loading animation to your specific project needs. 

By following this post, you're able to create a professional loading animation using HTML and CSS. This animation provides a simple yet effective way to indicate that content is being loaded. You can further customize this animation by adjusting the styles and animation properties to match your website's design. 

As you continue your web development journey, remember that loading animations are not just practical; they're an opportunity to engage and delight the users. Embrace creativity, experiment with various styles, and use loading animations to enhance your web projects. By mastering the art of loading animations, you're not only improving user experience but also adding a touch of elegance to your web design repertoire.

Ready to add your own loading animation to your website? Share your thoughts and experiences in the comments below, and keep exploring the endless possibilities of web design and development.

Download