Hacker News Reader

Comment by zarzavat | Hacker News Reader

> While <progress> is fairly self-explanatory – it shows how far along something is, such as your progress through a form

My understanding is that this is incorrect.

<progress> is for a progress bar, such as downloading a file, or a loading screen.

<meter> is for showing a value in linear space.

The progress through a form is a value in linear space, not a task that the user is waiting for. Their progress can go forward and back. The user is in control of the value. Therefore <meter> is the correct element.

Is the element there to keep the user amused while they are waiting for something? Could it conceivably be styled so as to include a waiting animation? Does it only ever move forwards and never backwards? If yes, then it's a <progress>, if no then it's a <meter>.

View on HN

Downloading a file or a loading screen is also a value in linear space.

The only difference, in my mind, is that:

• Progress is expected to go upwards as the underlying task is completed. It can, however, stall on a value or it can reset back to zero if the task fails and is restarted. But in the normal, common case, the trend is upwards towards completion.

• Meters reflect the current value of some metric and so can go up and down as the underlying value changes through time, e.g. room temperature, or disk space used of a disk space quota.

You could use a meter to indicates progress. As such, I think progress is a specialised meter, where we don't care so much about the underlying value, just that we're working steadily towards the goal.

Here's one counter example: Progress indicators can be indeterminate, when the duration of the task is unknown but you still want to communicate to the user that something is happening.

You can make an indeterminate <progress> by not specifying a value attribute, and then styling it with the :indeterminate pseudoclass (TIL).

It's well worth it to read the Apple Human Interface Guidelines, even if you don't develop for Apple platforms, they have some good universal UI advice:

Progress indicators: https://developer.apple.com/design/human-interface-guideline...

Gauges: https://developer.apple.com/design/human-interface-guideline...

The way I see it, you'd use <meter> when there is a known max and min value, and if what you're indicating isn't "progress".

So if your computer fan can go from 0% to 100% fan speed, use <meter/> to visualize that. Same for volume control, for example.

But, if the value is unbounded, then it still doesn't make sense to use <meter/>

Progress can go backwards too. Part of a file transfer might be determined to be corrupt, or it might refer to my career progress which frequently goes backwards.

Agreed. I work on a design system and we have replaced progress for meter in multi-step flows for this reason.

Reply on news.ycombinator.com