All tags/Progress

Uploads in progress

A native progress element per file, styled, with its label and percentage - the colour slot says how it goes.

1 The data progress/uploads.php php

<?php

  $uploads = [
    [ 'file' => 'holiday-photos.zip',  'done' => 100, 'color' => 'success' ],
    [ 'file' => 'quarterly-report.pdf','done' => 72,  'color' => 'accent'  ],
    [ 'file' => 'site-backup.tar.gz',  'done' => 38,  'color' => 'accent'  ],
    [ 'file' => 'video-raw.mov',       'done' => 91,  'color' => 'warning' ],
    [ 'file' => 'database.sql',        'done' => 12,  'color' => 'danger'  ] ];

?>

2 The template progress/uploads.pad pad

<div style="display:grid; gap:18px; width:min(100%, 460px); margin:0 auto">
  {uploads}{progress $done, label=$file, color=$color}{/uploads}
</div>

3 The result rendered on the server

100%

72%

38%

91%

12%