Create Sliding Bars with HTML & CSS

In this article, we will create a simple yet eye-catching Sliding Bars Animation using HTML and CSS. This effect is great for loading indicators, audio visualizers, or stylish design elements on your website.

Live Preview

Before we dive into the code, let's understand what we're building. The animation consists of four vertical bars that scale up and down at different intervals, creating a smooth and dynamic effect.

HTML Structure

The structure is simple, consisting of a container <div class="bars"> that holds multiple bars represented by <div class="bar"></div> elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sliding Bars</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="bars">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
</body>
</html>

CSS for Styling and Animation

Now, let's add some styles to position the bars and apply the animation effect.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;   
    align-items: center;
    height: 100vh;
    background-color: #121212;
}

.bars {
    display: flex;
    gap: 5px;
}

.bar {
    width: 10px;
    height: 40px;
    background-color: #ffffff;
    animation: slide 1s infinite ease-in-out;
}

@keyframes slide {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.5); }
}

.bar:nth-child(1) { animation-delay: 0s; }
.bar:nth-child(2) { animation-delay: 0.2s; }
.bar:nth-child(3) { animation-delay: 0.4s; }
.bar:nth-child(4) { animation-delay: 0.6s; }

Explanation of the Animation

The .bar elements scale vertically using the @keyframes slide animation.
The keyframes define a smooth transition where the bars grow taller at 50% of the animation cycle and return to their original height at 0% and 100%.
Using animation-delay, we stagger the animation timing for each bar, creating a wave effect.

Customization Ideas

You can customize the animation further:

Change the number of bars by adding more <div class="bar"></div> elements.
Adjust the color, height, and width in the .bar class.
Modify the animation speed by tweaking animation-duration.
Use different easing functions for a unique feel.

Conclusion

This Sliding Bars Animation is a great way to add a visually engaging element to your website. It is lightweight, fully CSS-powered, and customizable. Experiment with different styles to make it fit your design!

Try this animation and let us know how you use it in your projects! 🚀