Create Animated Flask Loader using HTML CSS

Looking for a cool, science-inspired preloader for your web application? This Animated Flask Loader built using pure HTML and CSS brings a bubbling chemistry lab feel to your UI! Perfect for education websites, science-themed platforms or simply to impress your users with a unique loading animation, this CSS flask preloader is lightweight, responsive and highly customizable.

Animated Flask Loader Structure

The HTML structure is minimal and semantic. It uses five individual flasks, each wrapped inside a container for proper layout and animation timing.

<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>

Each .flask represents a test tube-style container. The custom property --i is used to stagger the animation timing, making the flasks fill sequentially. All elements are wrapped inside .main-container and .loader for layout and centering.

This layout ensures responsiveness and easy scalability while keeping your CSS preloader structure organized and simple.

CSS Styling and Animation

The real magic lies in the CSS, where the flasks are styled and animated using only keyframes and custom properties.

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

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

.loader {
    gap: 30px;
}

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

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

Each flask is styled to look like a glowing test tube. The ::before pseudo-element creates the animated liquid fill effect. The fill-animation keyframes animate the liquid rising and falling with a hue-rotation for a color-shifting effect.

The use of calc(.1s * var(--i)) for animation-delay makes each flask animate in a beautiful staggered wave, giving the loader a smooth scientific vibe. This CSS animated test tube loader requires no JavaScript and runs infinitely for async operations.

This animated flask loader with pure HTML and CSS is a fantastic UI enhancement for websites related to science, education, technology and even modern SaaS platforms. It demonstrates how CSS animation, ::before pseudo-elements and custom properties can be combined to create beautiful loading effects without a single line of JavaScript.

Live Preview