Article Categories

Selected Reading

How to create an Animated bars using HTML and CSS?

HTML CSS Web Development Front End Technology

Animated bars are visually appealing elements that simulate music equalizer bars or loading indicators. Created using HTML for structure and CSS for styling and animation, these bars use CSS transform and @keyframes properties to create smooth scaling effects.

Syntax

@keyframes animationName {
    0% { transform: scaleY(1); }
    100% { transform: scaleY(value); }
}

.element {
    animation: animationName duration infinite alternate;
    animation-delay: delay-time;
}

Example: Basic Animated Bars

The following example creates a set of animated bars that scale vertically to simulate an audio equalizer

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background-color: #1a1a1a;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        margin: 0;
    }
    
    .animated-bars {
        display: flex;
        align-items: flex-end;
        gap: 8px;
        height: 100px;
    }
    
    .bar {
        width: 12px;
        height: 20px;
        background: linear-gradient(to top, #ff6b35, #f7931e, #ffd23f);
        border-radius: 6px;
        animation: bounce 0.8s infinite alternate ease-in-out;
        transform-origin: bottom;
    }
    
    .bar:nth-child(1) { animation-delay: 0.1s; }
    .bar:nth-child(2) { animation-delay: 0.2s; }
    .bar:nth-child(3) { animation-delay: 0.3s; }
    .bar:nth-child(4) { animation-delay: 0.4s; }
    .bar:nth-child(5) { animation-delay: 0.5s; }
    .bar:nth-child(6) { animation-delay: 0.4s; }
    .bar:nth-child(7) { animation-delay: 0.3s; }
    .bar:nth-child(8) { animation-delay: 0.2s; }
    
    @keyframes bounce {
        0% { transform: scaleY(1); }
        50% { transform: scaleY(2); }
        100% { transform: scaleY(4); }
    }
</style>
</head>
<body>
    <div class="animated-bars">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
</body>
</html>

Eight orange-yellow gradient bars appear on a dark background, each scaling vertically at different intervals to create a rhythmic bouncing effect resembling an audio equalizer.

Example: Loading Bar Animation

This example creates animated bars for a loading indicator with different colors

<!DOCTYPE html>
<html>
<head>
<style>
    .loading-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        background-color: #f0f0f0;
    }
    
    .loading-bars {
        display: flex;
        gap: 4px;
    }
    
    .loading-bar {
        width: 8px;
        height: 40px;
        background-color: #3498db;
        border-radius: 4px;
        animation: loading 1.2s infinite ease-in-out;
    }
    
    .loading-bar:nth-child(1) { animation-delay: 0s; background-color: #e74c3c; }
    .loading-bar:nth-child(2) { animation-delay: 0.1s; background-color: #f39c12; }
    .loading-bar:nth-child(3) { animation-delay: 0.2s; background-color: #f1c40f; }
    .loading-bar:nth-child(4) { animation-delay: 0.3s; background-color: #2ecc71; }
    .loading-bar:nth-child(5) { animation-delay: 0.4s; background-color: #3498db; }
    
    @keyframes loading {
        0%, 40%, 100% {
            transform: scaleY(0.4);
            opacity: 0.5;
        }
        20% {
            transform: scaleY(1);
            opacity: 1;
        }
    }
</style>
</head>
<body>
    <div class="loading-container">
        <div class="loading-bars">
            <div class="loading-bar"></div>
            <div class="loading-bar"></div>
            <div class="loading-bar"></div>
            <div class="loading-bar"></div>
            <div class="loading-bar"></div>
        </div>
    </div>
</body>
</html>

Five colorful bars (red, orange, yellow, green, blue) animate in sequence on a light gray background, each scaling up and down with changing opacity to create a wave-like loading effect.

Key Properties

Property	Description
`transform: scaleY()`	Scales the element vertically
`animation-delay`	Delays the start of animation for each bar
`transform-origin`	Sets the point from which transformation occurs
`infinite alternate`	Makes animation repeat back and forth continuously

Conclusion

Animated bars are perfect for creating engaging visual effects like audio equalizers or loading indicators. By combining CSS transforms, keyframes, and animation delays, you can create smooth, rhythmic animations that enhance user experience.

Aman Gupta

Updated on: 2026-03-15T17:28:27+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next