Designing a Dynamic Flask Loader using HTML and CSS

In this blog post, we'll explore the creation of a captivating animated loader using HTML and CSS. The loader features a series of flask-shaped elements with dynamic color transitions, providing an engaging visual experience for users. Follow along as we break down the HTML structure and delve into the CSS animations that bring this loader to life.

Also Read: Interactive Custom Volume Slider using HTML and CSS only

HTML Structure

To begin, let's dive into the HTML structure that forms the foundation of our animated loader.

<div class="main-container">
    <div class="loader">
        <span class="flask" style="--i:0"></span>
        <span class="flask" style="--i:1"></span>
        <span class="flask" style="--i:2"></span>
        <span class="flask" style="--i:3"></span>
        <span class="flask" style="--i:4"></span>
    </div>
</div>

The "main-container" serves as the primary container for our loader, ensuring a centered display on the webpage. It can also done by applying the style of "main container" to body.

Inside it, the "loader" encapsulates the individual flask-shaped elements, each represented by a span with the class .flask. The --i CSS variable is utilized to add a delay to the color animation, creating a staggered effect.

CSS Styling

Now that we've established the HTML structure for our animated loader, let's delve into the CSS styling to bring it to life. The overall layout, flask design, and dynamic color animation are key aspects we'll explore in this section.

Overall Layout

.main-container {
    min-width: 500px;
    min-height: 100vh;
}

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

.loader {
    gap: 30px;
}

The #main-container ensures a full-width and centered display on the webpage. It utilizes flexbox properties for both alignment and justification, creating a clean and centered layout. 

Inside the main container, the loader class defines the layout for our flask elements. The use of gap provides spacing between the flasks, while flex properties center the loader both horizontally and vertically.

Flask Design

.flask {
    width: 20px;
    height: 75px;
    overflow: hidden;
    position: relative;
    border-radius: 15px;
    background: #ffffff21;
    box-shadow: inset 0px 0px 10px 0px rgb(255 255 255 / 23%), 
                0px 0px 10px 0px rgb(43 43 43);
}

Dive into the specifics of styling the flask-shaped elements (flask). Learn about the dimensions, border-radius, and box-shadow properties that give the flasks a sleek appearance.

Dynamic Color Animation

.flask::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: #81e95b;
    border-radius: 0 0 15px 15px;
    animation: fill-animation 1.3s ease-in-out infinite;
    animation-delay: calc(.1s * var(--i));
}

@keyframes fill-animation {
    0% {
        filter: hue-rotate(0deg);
        transform: translateY(100%);
    }

    50% {
        transform: translateY(0);
    }

    100% {
        filter: hue-rotate(200deg);
        transform: translateY(100%);
    }
}

The flask::before pseudo-element is used to create the liquid fill inside the flask. It is absolutely positioned within the flask. The @keyframes fill-animation defines the animation sequence. It simulates the filling and emptying of the flask while dynamically changing the hue of the liquid.

The combination of creative design and thoughtful animation techniques will empower you to enhance user experiences in your web projects. Feel free to experiment and customize the loader to fit the aesthetics of your applications. 

Join us on this journey of web animation as we explore the artistry behind building visually stunning loaders. Let's bring motion and excitement to your web pages.

Download