LOADERS

Neon Energy Progress Loader

A futuristic animated progress loader with neon energy effects, live percentage tracking, glowing motion and a completed state.

Loading
0%
Processing data… 0 / 100
HTML
<div class="cr-loader-demo">

  <div class="cr-loader-box">

    <div class="cr-loader-top">

      <div class="cr-loader-status">
        <span class="cr-loader-spinner"></span>
        <span id="cr-loader-text">Loading</span>
      </div>

      <div class="cr-loader-percent">
        <span id="cr-load-number">0</span>%
      </div>

    </div>

    <div class="cr-progress-track">
      <div
        class="cr-progress-bar"
        id="cr-progress-bar"
      ></div>
    </div>

    <div class="cr-loader-bottom">

      <span>Processing data...</span>

      <span>
        <strong id="cr-load-count">0</strong> / 100
      </span>

    </div>

  </div>

</div>
CSS
*{
  box-sizing:border-box;
}

.cr-loader-demo{
  width:100%;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 24px;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(34,211,238,.08),
      transparent 35%
    ),
    radial-gradient(
      circle at 70% 35%,
      rgba(168,85,247,.07),
      transparent 30%
    ),
    #050914;
  font-family:Inter,Arial,sans-serif;
}

.cr-loader-box{
  position:relative;
  width:min(640px,100%);
  padding:32px 32px 27px;
  overflow:hidden;
  background:
    linear-gradient(
      145deg,
      rgba(13,25,44,.96),
      rgba(5,12,24,.98)
    );
  border:1px solid rgba(34,211,238,.20);
  border-radius:18px;
  box-shadow:
    0 30px 70px rgba(0,0,0,.55),
    0 0 45px rgba(34,211,238,.07),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.cr-loader-box::before{
  content:"";
  position:absolute;
  top:0;
  left:12%;
  width:76%;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    #22d3ee,
    #a855f7,
    transparent
  );
  box-shadow:0 0 16px rgba(34,211,238,.8);
}

.cr-loader-box::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-80px;
  top:-100px;
  border-radius:50%;
  background:rgba(168,85,247,.12);
  filter:blur(45px);
  pointer-events:none;
}

.cr-loader-top{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
}

.cr-loader-status{
  display:flex;
  align-items:center;
  gap:12px;
  color:#e5eefc;
  font-size:15px;
  font-weight:700;
  letter-spacing:.3px;
}

.cr-loader-spinner{
  position:relative;
  width:21px;
  height:21px;
  flex:0 0 21px;
  border:2px solid rgba(34,211,238,.14);
  border-top-color:#22d3ee;
  border-right-color:#a855f7;
  border-radius:50%;
  box-shadow:0 0 12px rgba(34,211,238,.25);
  animation:crLoaderSpin .7s linear infinite;
}

.cr-loader-spinner::after{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
  background:#22d3ee;
  box-shadow:0 0 10px #22d3ee;
  animation:crLoaderPulse .8s ease-in-out infinite alternate;
}

.cr-loader-percent{
  color:#ffffff;
  font-size:34px;
  font-weight:900;
  line-height:1;
  letter-spacing:-1.5px;
  text-shadow:
    0 0 8px rgba(34,211,238,.65),
    0 0 22px rgba(34,211,238,.30);
}

.cr-progress-track{
  position:relative;
  z-index:2;
  width:100%;
  height:11px;
  overflow:hidden;
  background:#0c1728;
  border:1px solid rgba(255,255,255,.05);
  border-radius:30px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55);
}

.cr-progress-bar{
  position:absolute;
  top:0;
  left:0;
  width:0%;
  height:100%;
  border-radius:30px;
  background:
    linear-gradient(
      90deg,
      #2563eb 0%,
      #06b6d4 40%,
      #22d3ee 65%,
      #a855f7 100%
    );
  background-size:200% 100%;
  box-shadow:
    0 0 10px rgba(34,211,238,.85),
    0 0 22px rgba(34,211,238,.45);
  transition:width .12s linear;
  animation:crEnergyFlow 1.8s linear infinite;
}

.cr-progress-bar::after{
  content:"";
  position:absolute;
  top:50%;
  right:-4px;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  border-radius:50%;
  background:#ffffff;
  box-shadow:
    0 0 5px #ffffff,
    0 0 12px #22d3ee,
    0 0 25px #22d3ee,
    0 0 38px rgba(168,85,247,.65);
  animation:crEnergyPulse .55s ease-in-out infinite alternate;
}

.cr-progress-bar::before{
  content:"";
  position:absolute;
  top:0;
  left:-70px;
  width:70px;
  height:100%;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.85),
      transparent
    );
  transform:skewX(-25deg);
  animation:crLoaderShine 1.2s linear infinite;
}

.cr-loader-bottom{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:16px;
  color:#71829d;
  font-size:12px;
  font-weight:500;
}

.cr-loader-bottom strong{
  color:#c7d7eb;
  font-weight:800;
}

@keyframes crLoaderSpin{
  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }
}

@keyframes crLoaderPulse{
  from{
    opacity:.35;
    transform:scale(.65);
  }

  to{
    opacity:1;
    transform:scale(1);
  }
}

@keyframes crEnergyFlow{
  from{
    background-position:0% 50%;
  }

  to{
    background-position:200% 50%;
  }
}

@keyframes crEnergyPulse{
  from{
    transform:
      translateY(-50%)
      scale(.75);
  }

  to{
    transform:
      translateY(-50%)
      scale(1.15);
  }
}

@keyframes crLoaderShine{
  from{
    left:-70px;
  }

  to{
    left:110%;
  }
}

@media(max-width:600px){

  .cr-loader-demo{
    min-height:430px;
    padding:25px 16px;
  }

  .cr-loader-box{
    padding:26px 20px 22px;
  }

  .cr-loader-percent{
    font-size:28px;
  }

}
JavaScript
document.addEventListener(
  'DOMContentLoaded',
  function() {

    var number =
      document.getElementById('cr-load-number');

    var count =
      document.getElementById('cr-load-count');

    var bar =
      document.getElementById('cr-progress-bar');

    var loaderText =
      document.getElementById('cr-loader-text');

    if (!number) {
      return;
    }

    if (!count) {
      return;
    }

    if (!bar) {
      return;
    }

    if (!loaderText) {
      return;
    }

    var progress = 0;

    function startLoader() {

      progress = 0;

      number.textContent = '0';
      count.textContent = '0';
      bar.style.width = '0%';

      loaderText.textContent = 'Loading';

      var loader =
        setInterval(
          function() {

            progress += 1;

            number.textContent =
              progress;

            count.textContent =
              progress;

            bar.style.width =
              progress + '%';

            if (progress >= 100) {

              clearInterval(loader);

              loaderText.textContent =
                'Done ✓';

              setTimeout(
                function() {

                  startLoader();

                },
                1500
              );

            }

          },
          45
        );

    }

    startLoader();

  }
);

How This Neon Energy Progress Loader Works

The Neon Energy Progress Loader combines a numeric percentage, an animated progress bar, a rotating status indicator, and a small processed-item counter inside one loader card. The HTML is divided into three main areas: the top status row, the progress track, and the bottom information row. The percentage starts at 0%, while the counter below displays 0 / 100.

The main container, .cr-loader-box, has a maximum width of 640px and uses a dark blue gradient background. A subtle cyan border, layered shadows, and an 18px border radius give the loader its panel-like appearance. The ::before pseudo-element adds a thin cyan-to-purple line across the top of the card, while ::after creates a blurred purple glow near the upper-right corner.

Next to the “Loading” text is a 21px circular spinner. Its outer ring uses transparent, cyan, and purple border colors. The crLoaderSpin animation rotates the ring through 360 degrees every 0.7 seconds. A second glowing circle is created with the spinner’s ::after pseudo-element. It repeatedly changes its opacity and scale through the crLoaderPulse animation.

The progress track itself is 11px high with a dark background and rounded edges. Inside it, .cr-progress-bar begins at width: 0%. JavaScript updates this width as loading progresses. The bar uses a horizontal gradient containing blue, cyan, and purple colors, with background-size: 200% 100%. The crEnergyFlow animation continuously shifts that background position, creating the moving energy effect.

Two pseudo-elements add more movement to the progress bar. The ::after element sits near the leading edge of the bar as an 18px white glowing circle. It scales between 0.75 and 1.15 every 0.55 seconds. The ::before element creates a bright, skewed highlight that travels from -70px to 110% of the bar through the crLoaderShine animation.

For more detail about how these repeating effects are configured, see the MDN CSS animation documentation.

JavaScript controls the actual progress value. After DOMContentLoaded, the script retrieves the percentage number, counter, progress bar, and loading text by their IDs. It also checks that each required element exists before starting the loader.

The startLoader() function resets everything to zero and changes the status back to “Loading.” A setInterval() then increases progress by one every 45 milliseconds. Each update changes the large percentage, the processed count, and the progress bar width. When the value reaches 100, the interval stops and the status changes to Done ✓. After a 1500ms delay, startLoader() runs again, so the loader continuously repeats.

A media query also adjusts the component below 600px. The demo area becomes shorter, the loader box gets reduced padding, and the percentage font size changes from 34px to 28px.

Customizing the Neon Energy Progress Loader

Most of the component’s appearance and timing can be adjusted directly through the existing CSS and JavaScript values.

  • Change #22d3ee, #a855f7, #2563eb, and #06b6d4 to create a different progress-bar color scheme.
  • Adjust the .cr-loader-box maximum width of 640px and its 18px border radius to change the card dimensions and shape.
  • Modify the .cr-progress-track height of 11px to make the progress indicator thinner or thicker.
  • Change the 34px percentage font size to make the progress value more or less prominent.
  • Edit the spinner’s 0.7s rotation duration to control how quickly the status indicator rotates.
  • Adjust the 1.8s energy-flow and 1.2s shine durations to change the speed of the bar effects.
  • Change the JavaScript interval from 45 milliseconds to control how quickly the loader reaches 100%.
  • Modify the 1500 millisecond timeout to change how long the completed state remains visible before restarting.

Where to Use the Neon Energy Progress Loader

This loader works best when an interface needs to communicate measurable progress instead of showing an indefinite spinner.

  • File uploading or downloading interfaces where progress can be represented from 0 to 100.
  • Data processing screens that need both a percentage and processed-item count.
  • Dashboard loading states for reports, analytics, or generated content.
  • Installation, import, export, or setup workflows with visible completion progress.
  • Technology-themed landing pages or demos that use dark backgrounds and neon interface elements.

If you need a simpler loading indicator with a related progress-based layout, the Progress Bar Loader is another CodeRipple component worth considering. For real applications, the simulated JavaScript percentage can also be replaced with progress values supplied by the actual task being performed.

Frequently Asked Questions

Does the Neon Energy Progress Loader use JavaScript?

Yes. JavaScript increases the progress value from 0 to 100, updates both numeric displays, changes the progress bar width, switches the status to Done ✓, and restarts the loader after 1.5 seconds.

How long does one loading cycle take?

The progress value increases once every 45 milliseconds for 100 steps, so the active progress phase takes about 4.5 seconds. The component then remains completed for another 1500 milliseconds before restarting.

Are the glowing effects created with images?

No. The glow effects are created entirely with CSS using gradients, box-shadow, text-shadow, blurred pseudo-elements, and animated elements.

Is the loader responsive on mobile screens?

Yes. At viewport widths of 600px or less, the component reduces its outer spacing, card padding, minimum demo height, and percentage text size.

The Neon Energy Progress Loader uses a straightforward combination of CSS animation and JavaScript-driven width updates, making its visual effects separate from the logic that controls the displayed progress.

Scroll to Top