File Upload + Progress Showcase

This showcase combines the dsx upload affordance with progress feedback at both list and summary level.

Live Preview

Features demonstrated

.dsx-btn.dsx-btn--dashed as the upload trigger / dropzone surface
.dsx-progress and .dsx-progress__bar from css/progress-bar.css for per-file progress states
.dsx-status dots from css/status.css for queued, uploading, complete, and error labels
.dsx-progress-indicator for overall progress (3/5 files)

States in the file list

Queued: 0% progress bar on the neutral track
Uploading: 45% progress bar with animated fill treatment
Complete: 100% success bar with a checkmark
Error: red progress bar plus an inline recovery message

Pattern summary

<button type="button" class="dsx-btn dsx-btn--dashed upload-trigger">
  <span>Drop files here or browse from your device</span>
</button>

<div class="dsx-progress-indicator" role="progressbar" aria-valuenow="60" aria-valuetext="3 of 5 files processed">
  <svg viewBox="0 0 126 126" width="126" height="126" aria-hidden="true">
    <circle class="dsx-progress-indicator__circle" cx="63" cy="63" r="56" stroke-width="8"></circle>
    <circle
      class="dsx-progress-indicator__circle dsx-progress-indicator__color--inprogress"
      cx="63"
      cy="63"
      r="56"
      stroke-width="8"
      stroke-dasharray="351.86"
      stroke-dashoffset="140.74"
    ></circle>
  </svg>
  <span class="dsx-progress-indicator__center dsx-progress-indicator__color--inprogress">3/5</span>
</div>

<li class="upload-file upload-file--uploading">
  <span class="upload-file__title">onsite-photos.zip</span>
  <div class="dsx-progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="45">
    <span class="dsx-progress__bar" style="width: 45%"></span>
  </div>
  <span class="dsx-status dsx-status--info">Uploading</span>
</li>

Integration notes

The progress-bar stylesheet uses .dsx-progress / .dsx-progress__bar as the actual class names.
Success and error rows reuse the built-in --success and --error progress bar modifiers.
Keep visible text next to status dots and progressbars so state is not conveyed by color alone.