The validation rate of a skill is represented using a progressbar.

The rate is a value between 0 and 100.

When the skill has never been attempted, the bar is not visible.

Otherwise, the main bar is gray, or a darker blue when on blue background.

The filled part, proportional to the rate, is represented in red, orange or green depending on the rate, by increasing order, with thresholds that may depend on the skill (not sure it’s necessary).

Similarly to the score ring, a second rate, higher than the first one, may be displayed, using a lighter color than the main color (TODO: or darker gray for consistency with the score ring?)

The designs show a special case for 100% where the bar is not visible. Ignore this for now.

There are 3 representations for a progress bar:

• thin horizontal
• thick horizontal, with the rate visible on the left
• thick vertical