A Progress Bar field which is linked to a Multiple Choice (one selection layout) field. The progress line on the bar will show depending on the selection order of a drop down menu option.
Example - 6 options in a drop down menu. Choosing the third option will display at 50% on the progress bar. Similar to the checklist bar in Trello (attached).
The progress bar can be displayed in the Details View and/or Tables to help users quickly gauge where the status of something is at.
Layout and display rules can be available like the options to change the bar color, display multiple choice text below the bar, display percentage, alignment, width, etc.
Below is an example how to control color.
Change #view_10 to your table view and change td.field_195 to the intended field which can be obtained from inspect on chrome and change orange to your desired color or color code.
#view_10 td.field_195 progress {
-webkit-appearance: none;
}
::-webkit-progress-value {
background-color: orange;
}
how would I attach this to the applicable value?
<progress value="22" max="100"></progress>
Thats the correct implementation of this.
If you want to build a progress bar you can use the following HTML. Can be inserted directly into a text formula field
<progress value="35" max="100">35%</meter>
Just replace the numerical value with a whole number percentage value generated elsewhere in your object.
How do you create the progress bar?