All tags/Progress

Steps and sizes

With steps a dot per step, the ones done filled and the current one ringed; size= makes a bar thin or thick.

1 The template progress/steps.pad pad

<div style="display:grid; gap:22px; width:min(100%, 460px); margin:0 auto">
  {progress 3, max=5, steps, label='Checkout'}
  {progress 2, max=4, steps, label='Onboarding', size='large', color='success'}
  {progress 45, label='Disk space', size='small', color='neutral'}
  {progress 7.5, max=10, label='Quota', size='large', color='warning'}
</div>

2 The result rendered on the server

45%

75%