{progress} · PAD tags

Syntax

{progress 72}
{progress $done, max=100, label='text', color='success', size='small'}
{progress 3, max=5, steps, label='text'}

Parameters

value: The value, a number, clamped to 0 ... max.

Options

max: What the value counts to, default 100. With steps the number of steps, a whole number up to 50.
label: Shown above the bar and the accessible name; default Progress (not shown).
color: A colour slot: accent (default), success, warning, danger or neutral.
size: small, medium (default) or large - the height of the bar or the dots.
steps: Bare option: a dot per step joined by a line, the steps up to the value filled and the current one ringed.

Description

{progress} shows how far something has got. It writes the native <progress value max> element, styled on the server (tags/_lib/progress.php), under a line with the label and the rounded percentage - no script, and it prints. The value is clamped to 0 ... max.

With steps it draws a row of dots instead, one per step up to max, joined by a line: the steps up to the value filled and the current one ringed - a checkout or a wizard. The steps are role="progressbar" with aria-valuenow, -min, -max and aria-valuetext="Step 3 of 5".

The visible label line is aria-hidden, since the bar carries the same text as its aria-label - it is not read twice. color picks a slot and size the thickness. The colours are --pad-progress-track, -text and one per slot on .pad-progress, with light-dark() defaults written once per page.

A value that is no number, a max that is not above 0 (or for steps not a whole number up to 50), an unknown color or size is an error under the strict check.

Examples

A bar per upload

The label and percentage above each bar; the colour slot says how it goes.

Templateexamples/progress/1-uploads.pad

<div style="display:grid; gap:14px; max-width:420px">
  {uploads}{progress $done, label=$file, color=$color}{/uploads}
</div>

PHPexamples/progress/1-uploads.php

<?php

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

?>

Resultopen alone

100%

72%

91%

12%

Steps and sizes

steps draws a dot per step; size= makes a bar thin or thick, max= changes what it counts to.

Templateexamples/progress/2-steps.pad

<div style="display:grid; gap:18px; max-width:420px">
  {progress 3, max=5, steps, label='Checkout'}
  {progress 45, label='Disk space', size='small', color='neutral'}
  {progress 7.5, max=10, label='Quota', size='large', color='warning'}
</div>