Progress Bar Loader

<div class="progress-loader" aria-label="Loading">
  <div class="progress-loader-bar"></div>
</div>

.progress-loader{
  width:260px;
  height:10px;
  overflow:hidden;
  background:#111b2b;
  border-radius:20px;
}

.progress-loader-bar{
  width:45%;
  height:100%;
  border-radius:20px;

  background:linear-gradient(
    90deg,
    #22d3ee,
    #8b5cf6,
    #d946ef
  );

  box-shadow:0 0 16px rgba(34,211,238,.45);

  animation:progressMove 1.5s ease-in-out infinite;
}

@keyframes progressMove{
  0%{
    transform:translateX(-110%);
  }

  100%{
    transform:translateX(245%);
  }
}

How This Progress Bar Loader Works

The Progress Bar Loader is a compact CSS-only loading indicator built from two nested <div> elements. The outer .progress-loader element acts as the fixed track, while .progress-loader-bar creates the moving gradient segment inside it. There is no JavaScript in this component, so the entire loading effect is handled through CSS animation.

The outer loader is 260px wide and 10px high. Its #111b2b background creates a dark track behind the animated bar. A 20px border radius rounds both ends, giving the loader a pill-shaped appearance even though the track itself is relatively thin.

The track also uses overflow: hidden. This property is important because the animated inner bar moves beyond the left and right edges of the container during each cycle. By hiding overflow, only the part of the bar currently inside the 260px track remains visible. Without it, the gradient element would be visible outside the intended loader area.

The inner .progress-loader-bar uses width: 45%, so the moving segment covers less than half the width of the track. Its height is set to 100%, allowing it to exactly match the track’s 10px height. The same 20px border radius keeps the moving segment rounded at both ends.

Instead of using a single background color, the bar uses a 90-degree linear gradient. It moves through cyan #22d3ee, purple #8b5cf6, and pink #d946ef. Because the gradient runs horizontally, the colors naturally follow the direction in which the bar travels.

A cyan box-shadow adds a glow around the moving segment. The shadow uses 0 0 16px rgba(34,211,238,.45), which creates a soft highlight without changing the size of the actual bar.

Movement comes from the progressMove keyframes. At the beginning of the animation, the bar has transform: translateX(-110%). This places it slightly beyond the left side of its starting position. By the end, the transform reaches translateX(245%), moving the bar across the track and beyond the opposite side.

The animation runs for 1.5s, uses ease-in-out, and repeats infinitely. The easing makes the movement slower near the start and end of each cycle rather than maintaining one constant speed. Because the loader uses transforms rather than repeatedly changing layout dimensions, the animation remains simple and focused on horizontal motion. For more information about this property, see the MDN CSS transform documentation.

The HTML also includes aria-label="Loading" on the outer element. This gives the loader a short accessible label even though there is no visible loading text inside the component.

Customizing the Progress Bar Loader

The loader has only a few CSS values, so its size, colors, and animation can be adjusted without changing its basic structure.

• Change the 260px width of .progress-loader to make the entire loading track shorter or longer.
• Adjust the 10px height to create a thinner or thicker progress indicator.
• Replace #111b2b to use a different track background.
• Change the inner bar’s 45% width to control how much of the track the animated segment occupies.
• Edit #22d3ee, #8b5cf6, and #d946ef to create a different gradient color combination.
• Adjust the 16px box-shadow blur or its .45 alpha value to make the glow softer or stronger.
• Change the 1.5s animation duration to make the bar travel faster or slower.
• Replace ease-in-out with another timing function if you want different acceleration during the movement.

Where to Use the Progress Bar Loader

This component is suitable for interfaces where you need a small indefinite loading animation rather than an exact percentage-based progress indicator.

• Loading states for dashboard panels or content sections.
• Form submission screens while a request is being processed.
• File or data interfaces where exact completion progress is not available.
• Cards, modals, and side panels that need a compact loading state.
• Dark-themed interfaces where the cyan, purple, and pink gradient fits the surrounding design.
• Demo projects that need a CSS-only alternative to a spinner.

If your interface needs a displayed percentage and JavaScript-controlled completion instead, the Neon Energy Progress Loader provides a more detailed progress experience. This Progress Bar Loader is better suited to tasks with an unknown duration because its animation loops continuously rather than representing a real completion value.

Frequently Asked Questions

Does the Progress Bar Loader use JavaScript?

No. The component contains no JavaScript. Its movement is created entirely with CSS using the animation, @keyframes, and transform properties.

Does the 45% bar width represent actual loading progress?

No. The 45% value controls only the visual width of the moving segment. It does not indicate that a task is 45 percent complete.

Why is overflow hidden on the loader track?

The moving bar starts and finishes outside the visible track. overflow: hidden clips those outside portions so the animation stays contained inside the rounded loader.

Can the animation speed be changed?

Yes. The current progressMove animation lasts 1.5s. Decreasing that duration makes the bar move faster, while increasing it produces a slower loading cycle.

The Progress Bar Loader keeps its implementation minimal by combining a fixed track, a moving gradient segment, and one repeating keyframe animation, making it easy to place inside existing layouts without additional scripting.