Few days ago I noticed that cool multicolor, animated rainbow progress bar on Instagram Web for the first time. Obviously, I tried to create similar effect myself using just the CSS, and here I’m sharing what I came up with.

Today, I’m going to share how I created the CSS-only lookalike effect of the very cool Instagram loading effect. Before going any further, let me tell you how the effect looks like. You may head over to Instagram website, and check some pages there to see it in live, or check it directly in action.

Cool, isn’t it? Let’s get into how a regular front-end developer and a CSS-lover like me would do it.

Preface

You might already know that you don’t have to rely on JavaScript anymore to do a rainbow gradient-like effect. If you are some deep into CSS, you have already done repeating gradients using CSS3 CSS3 linear-gradient function. Similarly, we can do Rainbow gradients.

So, half of our problem is already solved, thanks to CSS gradients!

What about the animation?

Well, the idea is to give our gradient background a huge size, maybe 7-times of the usual; and then we can animate the background-position using CSS3 keyframes. Seems pretty simple, huh! Let’s jump into the code now.

HTML

Just one <div>, and an ID to it to target it further:

<div id="rainbow-progress-bar"></div>

CSS

First goes a keyframe declaration to animate the background-position of the rainbow background:

@keyframes rainbow { 
  0% { background-position: 0% 100%; }
  50% { background-position: 100% 200%; }
  100% {background-position: 0% 100%; }
}

Now comes the styling part for:

  1. Positioning the bar at the very top of the page
  2. Providing it a size and a nice rainbow gradient effect
  3. Using the above keyframe declaration to animate the gradient
#rainbow-progress-bar {
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;

  width: 100%;
  height: 4px;

  background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
  background-size: 900% 900%;

  animation: rainbow 9s ease infinite;
}

That’s it! Our fancy instagram rainbow progress bar effect is ready, go check it out here.

Making it functional

As you have seen in the above demonstration, our progress bar effect is just fancy, and not functional. To make it sane and functional, we’ll be making use of a tiny piece JavaScript, and may also add some enhancements in the CSS part optionally.

JavaScript

As our effect is actually a progress bar, it should be visible only when the page is loading, and should disappears when the page has completely loaded.

The below given JavaScript code snippet allows to achieve that without requiring any changes in the CSS at all:


let progressBar = document.querySelector("#rainbow-progress-bar");
window.onload = function() {
  progressBar.style.display = 'none';
};

I tried making it a bit more slick and smooth by making use of CSS transitions. Instead of changing the display, I changed the visibility of the progress bar element, which makes use of CSS transition property for the visibility.

See the final Product

And that was it! I hope you enjoyed this piece, if you really did, then you can show your appreciation by sharing the post, can follow me on Instagram, I’m very new there.

Finally, thanks for your time here. I’ll post more often, will bring more useful stuff in coming days. Cheers!

Read further