Progress bar styles — one class each

Add a cu-progress--* class to the progress wrapper and the bar restyles. The markup, the role="progressbar" ARIA attributes and the width updates are untouched — only the paint changes, so nothing about accessibility or behaviour shifts.

What you should see: the live uploader below uses the striped style; under it, each style is shown as a static swatch at a fixed percentage so you can compare them side by side.

Live — --striped

Drag & drop files here, or paste from clipboard

Every style, at 62%

default

--thin

--thick

--flat

--striped — animated

--segmented

--glow

--thick --segmented — combined

Usage

// Apply to the uploader's progress wrapper after it renders
const up = CoreUpload.create('#uploader', { showProgress: true });
up.container.querySelector('.cu-progress')
 .classList.add('cu-progress--striped');

/* or pin it in your own stylesheet for every uploader on the page */
.cu-progress { }              /* your override point */
.cu-progress-fill { background: #0891b2; }

Styles combine — the last swatch above is --thick and --segmented together. --striped honours prefers-reduced-motion and stops animating for readers who ask for that.