webdevpuneet.com

Related Snippets

73 in Loaders category
1–6 of 60

Konva Animated Progress Ring

Velocity.js Bouncing Loader Bars

Bootstrap Skeleton Loader Cards

Bootstrap Loading Spinner Overlay

Lottie Success Checkmark Loader

Heartbeat Pulse Monitor Loader

Gradient Progress Bars — Animated HTML CSS JS Snippet

Gradient Progress Bars · Loaders · Plain HTML, CSS & JS · Live preview

CategoryLoaders
TagsCSS AnimationLoading StatesCSS Grid

Copy & paste

Source Code

<div class="page">
  <section class="group">
    <h3 class="group-title">Animated Gradient</h3>
    <div class="prog-wrap">
      <div class="prog-header"><span class="prog-label">Storage Used</span><span class="prog-val">72%</span></div>
      <div class="prog-track"><div class="prog-bar bar-indigo" style="--p:72%"></div></div>
    </div>
    <div class="prog-wrap">
      <div class="prog-header"><span class="prog-label">CPU Usage</span><span class="prog-val">48%</span></div>
      <div class="prog-track"><div class="prog-bar bar-cyan" style="--p:48%"></div></div>
    </div>
    <div class="prog-wrap">
      <div class="prog-header"><span class="prog-label">Memory</span><span class="prog-val">89%</span></div>
      <div class="prog-track"><div class="prog-bar bar-red" style="--p:89%"></div></div>
    </div>
  </section>

  <section class="group">
    <h3 class="group-title">Striped Animated</h3>
    <div class="prog-wrap">
      <div class="prog-header"><span class="prog-label">Uploading files…</span><span class="prog-val">63%</span></div>
      <div class="prog-track"><div class="prog-bar bar-stripe bar-green" style="--p:63%"></div></div>
    </div>
    <div class="prog-wrap">
      <div class="prog-header"><span class="prog-label">Syncing database</span><span class="prog-val">31%</span></div>
      <div class="prog-track"><div class="prog-bar bar-stripe bar-purple" style="--p:31%"></div></div>
    </div>
  </section>

  <section class="group">
    <h3 class="group-title">Segmented / Steps</h3>
    <div class="prog-wrap">
      <div class="prog-header"><span class="prog-label">Onboarding progress</span><span class="prog-val">Step 3 of 5</span></div>
      <div class="seg-track">
        <div class="seg done"></div>
        <div class="seg done"></div>
        <div class="seg active"></div>
        <div class="seg"></div>
        <div class="seg"></div>
      </div>
    </div>
  </section>

  <section class="group">
    <h3 class="group-title">Skill Bars</h3>
    <div class="skills">
      <div class="skill-row">
        <span class="skill-name">React</span>
        <div class="skill-track"><div class="skill-bar" data-p="90"></div></div>
        <span class="skill-pct">90%</span>
      </div>
      <div class="skill-row">
        <span class="skill-name">TypeScript</span>
        <div class="skill-track"><div class="skill-bar" data-p="78"></div></div>
        <span class="skill-pct">78%</span>
      </div>
      <div class="skill-row">
        <span class="skill-name">Node.js</span>
        <div class="skill-track"><div class="skill-bar" data-p="65"></div></div>
        <span class="skill-pct">65%</span>
      </div>
      <div class="skill-row">
        <span class="skill-name">CSS / Design</span>
        <div class="skill-track"><div class="skill-bar" data-p="85"></div></div>
        <span class="skill-pct">85%</span>
      </div>
    </div>
  </section>

  <section class="group">
    <h3 class="group-title">Interactive — Click to update</h3>
    <div class="prog-wrap">
      <div class="prog-header"><span class="prog-label">Project completion</span><span class="prog-val" id="liveVal">55%</span></div>
      <div class="prog-track"><div class="prog-bar bar-indigo" id="liveBar" style="--p:55%"></div></div>
    </div>
    <div class="btn-row">
      <button class="ctrl-btn" onclick="adjustBar(-10)">−10%</button>
      <button class="ctrl-btn" onclick="adjustBar(-5)">−5%</button>
      <button class="ctrl-btn primary" onclick="adjustBar(5)">+5%</button>
      <button class="ctrl-btn primary" onclick="adjustBar(10)">+10%</button>
    </div>
  </section>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Gradient shimmer animation
background-size: 200% 100% + background-position keyframe animation creates a continuous shimmer sweep without JavaScript.
Striped moving bars
repeating-linear-gradient(45deg, ...) layered over a gradient base, animated with background-position — creates diagonal moving stripe pattern.
CSS custom property width
--p custom property on each bar drives width: var(--p) — set fill amount with a single inline style attribute.
Segmented step indicator
Flex row of equal segments with .done, .active, and default states. Active segment pulses with an opacity keyframe animation.
Skill bars load animation
width: 0% on init, animated to data-p + '%' via a 200ms-delayed setTimeout — ensures visible animation after first paint.
Interactive +/− controls
adjustBar(delta) clamps value to 0–100 and updates both the CSS custom property and label text simultaneously.
Five colour variants
Indigo, cyan, red/amber, green, and purple — covering the most common status and brand colour schemes.
Smooth width transition
cubic-bezier(.4,0,.2,1) easing on width — smooth deceleration that feels physical rather than linear.

About this UI Snippet

Gradient Progress Bars — CSS Shimmer, Stripe Animation, Segmented Steps & Skill Bars

Screenshot of the Gradient Progress Bars snippet rendered live

Progress bars are among the most versatile UI components — used for file uploads, page load indicators, onboarding completion, skill showcases, storage usage displays, and interactive data visualisations. This snippet delivers five distinct progress bar styles in a single cohesive component: animated gradient shimmer bars, moving stripe bars, segmented step indicators, animating-in skill bars, and an interactive bar with +/- controls.

Getting progress bars right requires solving several CSS challenges simultaneously: the fill width must animate smoothly, the gradient must feel alive (not static), stripes must animate without background-position glitches, and the on-load animation must feel purposeful rather than mechanical.

Animated gradient shimmer

The shimmer effect uses a wider-than-container gradient: background: linear-gradient(90deg, #6366f1, #8b5cf6, #6366f1) with background-size: 200% 100%. The @keyframes shimmer animates background-position from 200% 0 to -200% 0 over 2 seconds — this creates a continuous sweep of lighter purple across the bar. The background-size: 200% means the gradient repeats: as the right edge exits, the left edge enters, creating a seamless loop.

The fill width is driven by a --p CSS custom property set inline on each bar: style="--p:72%". The width: var(--p, 0%) in CSS reads this property. Animating from 0% to the target width is handled by transition: width .6s cubic-bezier(.4,0,.2,1) — the same Material Design easing used for panel motions.

Striped moving bars

Striped bars layer two backgrounds: a repeating diagonal stripe pattern using repeating-linear-gradient(45deg, ...) over a solid gradient base. The stripe animation uses background-position increments — moving by one stripe-width (24px) per second creates the illusion of movement. The key implementation detail is setting background-position as the animation property (not background-image) since position-only animation avoids repaints.

Segmented step indicator

The step bar uses a flex row of equal-width <div class="seg"> elements with 4px gaps. Completed steps get .done (solid indigo), the active step gets .active (gradient with a pulsing opacity animation at 1.4s ease-in-out), and future steps remain light grey. This pattern is used in multi-step forms and onboarding flows.

Skill bars with load animation

Skill bars start at width: 0% and animate to their target via a setTimeout on DOMContentLoaded — the 200ms delay ensures the page has painted before the animation runs, making it feel like a triggered reveal rather than a flash. The data-p attribute stores the target percentage, read by JS and set as bar.style.width.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSFive grouped sections appear: gradient shimmer bars, striped animated bars, segmented steps, skill bars, and an interactive bar with controls.
  2. 2
    Watch the animationsGradient bars shimmer continuously. Striped bars have diagonal lines moving right-to-left. Skill bars animate in from 0% to their target width on load.
  3. 3
    Use the +/- buttonsThe interactive bar section adjusts "Project completion" in 5% or 10% steps. The bar animates smoothly between values.
  4. 4
    Set progress valuesChange style="--p:72%" on any .prog-bar to set its fill width. Values from 0% to 100% work directly.
  5. 5
    Change the colour variantSwap bar-indigo, bar-cyan, bar-red, bar-green, or bar-purple on any .prog-bar to change the gradient colour scheme.
  6. 6
    Update the segmented stepsAdd or remove <div class="seg"> elements. Apply .done to completed steps and .active to the current step. The flex layout adjusts automatically.

Real-world uses

Common Use Cases

File upload and download progress
The striped animated bar is the universal pattern for in-progress operations — stripes communicate activity even when the exact percentage is uncertain.
Onboarding completion flows
The segmented step indicator maps directly to onboarding steps — users can see how many steps remain. Pair with a multi-step form.
Dashboard storage and resource usage
The gradient shimmer bars with percentage labels display storage quotas, CPU/memory usage, and API rate limit consumption in dashboard cards.
Portfolio skill showcases
The skill bars section is a classic portfolio pattern — technology names on the left, animated fill bars showing proficiency level, percentage on the right.
Survey and quiz completion
A thin progress bar at the top of a multi-question form shows survey completion — reduces abandonment by showing users how close to done they are.
Fundraising and goal trackers
Non-profits and crowdfunding pages use gradient bars to show funding progress toward a goal — the shimmer animation adds energy to the fundraising display.
Related: SVG Logo Draw-In Loader
See the SVG Logo Draw-In Loader for a related loaders pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Use an IntersectionObserver on each .prog-bar. When the bar enters the viewport, set bar.style.setProperty('--p', targetWidth). Start with --p: 0% in CSS so bars don't animate before they're visible. See the reveal on scroll snippet for the observer pattern.

Make the bar position: relative and add a <span class="label"> child with position: absolute; right: 6px; top: 50%; transform: translateY(-50%). Ensure the bar height is at least 18px. Hide the label when --p < 15% to avoid overflow.

Call bar.style.setProperty('--p', value + '%') to update the fill width. For upload progress: read event.loaded / event.total * 100 from an XHR or Fetch progress event and call setProperty on each progress update.

Create a ProgressBar component with {label, value, variant, striped} props. value drives style={{['--p']: value + '%'}}. variant applies the colour class. striped conditionally adds the stripe class. The skill bar animation uses useEffect with a setTimeout(() => setWidth(targetValue), 200).