Skip to content

Upload Progress List

Dark Tailwind CSS upload list with per-file progress bars, speed and time left, pause, resume, retry and remove actions, a queue and total progress.

Also known as: file upload progress, upload manager list, multiple file upload ui, upload queue

Tailwind CSS Progress Bars Responsive Dark #dark #file #list #progress #responsive #upload

Upload Progress List live demo

Open in new tab

Tailwind CSS code (HTML, CSS, JS)

A dark upload manager built with Tailwind CSS that lists files with their own progress bars, transfer speed, time left and status: uploaded, uploading, paused, failed or waiting in the queue. Use it in file managers, media libraries, CMS editors or any form that sends large attachments.

How it works

The root is .tup-uploads. The header shows a summary (data-tup-summary), an "Add files" label that wraps a visually hidden <input type="file" multiple>, and a total progress bar (data-tup-total). Each file is an li.tup-item with a colored extension badge, the file name (data-tup-name), a percentage, a native <progress class="tup-bar"> and a status line (data-tup-meta).

Everything is driven by three attributes on .tup-item: data-tup-state (done, uploading, paused, error or queued), data-tup-size in bytes, and data-tup-speed in MB per second. style.css colors each bar through the --tup-bar-fill variable per state and shows only the buttons that fit: Pause while uploading, Resume when paused, Retry on errors and a check mark when done. The remove button is always visible.

The script initializes every .tup-uploads on DOMContentLoaded and runs a timer every TICK_MS (250 ms). On each tick it starts queued files while fewer than MAX_PARALLEL (2) are uploading, adds bytes according to each file's speed, updates the bars, percentages, status texts and totals, and switches finished files to done. Choosing files in the picker clones the first row as a template and queues the new files. "Clear completed" (data-tup-clear) removes every finished row. Without JavaScript the list still renders the initial states correctly.

Customization

  • MAX_PARALLEL at the top of script.js: allow more simultaneous uploads.
  • --tup-fill, --tup-fill-done, --tup-fill-error, --tup-fill-paused and --tup-fill-total on .tup-uploads in style.css: change the bar colors for each state and the gradient of the total bar.
  • data-tup-state on an .tup-item: set the starting state of a row, e.g. paused to show the Resume button.
  • data-tup-speed on an .tup-item: make a simulated file upload faster or slower.
  • h-1.5 on each progress.tup-bar and h-2 on the total bar: make the bars thicker or thinner.
  • tick() in script.js: replace the simulation with real uploads. fetch() has no upload progress events, so use XMLHttpRequest with upload.onprogress and write the sent bytes to item._tup.loaded.

Use cases

  • File managers: each file shows its own progress bar, speed and time left
  • Media libraries: uploads can be paused, resumed, retried or removed individually
  • CMS editors: a queue limits how many files upload at once and a total bar shows overall progress
  • Forms with large attachments: failed and completed files are clearly marked, with a clear completed button

Accessibility

Bars are native progress elements labelled by their file name with aria-labelledby, so assistive technology reads the current value. Icon buttons carry an aria-label that includes the file name, such as "Pause brand-assets.zip". State changes ("uploaded", "paused", "removed") are announced through the role="status" footer instead of announcing every percentage. After an action focus moves to the next visible button in the row, or to a neighbouring row when a file is removed. The file picker shows a focus outline through has-[input:focus-visible], and the bar transition is disabled under prefers-reduced-motion.

Usage notes

For several lists on one page, give the initial file names unique id values; rows added by the script get generated ids.

Upload Progress List at a glance

Framework
Tailwind CSS
Code
HTML, CSS, JavaScript
JavaScript
Vanilla JavaScript, no jQuery
Dependencies
Tailwind CSS
Layout
Responsive, works on mobile, dark design
Category
Progress Bars
License
Free for personal and commercial use

Questions about this template

Can I use the Upload Progress List code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Tailwind CSS from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

  • <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

The Tailwind browser build is for prototyping. In production, compile Tailwind with its CLI or your bundler.

Upload Progress List – Tailwind CSS progress bars component screenshot
Upload Progress List · Tailwind CSS Progress Bars

More Progress Bars

Circular Progress Indicator – Pure CSS progress bars preview

Circular Progress Indicator

SVG ring progress indicators with an animated fill, count-up percentage, glow colors and a slider-driven demo ring with color thresholds.

Pure CSS Progress Bars
Animated Progress Bars – Bootstrap 5 progress bars preview

Animated Progress Bars

Bootstrap 5 dark dashboard with labelled bars that fill on scroll, a striped animated build progress bar and a stacked storage bar.

Bootstrap 5 Progress Bars