# Progress Bar Field

**URL:** <https://forums.knack.com/t/progress-bar-field/9577>\
**Category:** Feature Requests\
**Tags:** custom-code, workaround-available\
**Created:** [October 7, 2015, 2:27am UTC](https://forums.knack.com/t/progress-bar-field/9577 "2015-10-07T02:27:00Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![DavidTe57527](https://avatars.discourse-cdn.com/v4/letter/d/df788c/32.png) [@DavidTe57527](https://forums.knack.com/u/DavidTe57527)\
**Post date:** [October 7, 2015, 2:27am UTC](https://forums.knack.com/t/progress-bar-field/9577/1 "2015-10-07T02:27:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TamerAltah86075](https://avatars.discourse-cdn.com/v4/letter/t/b38774/32.png) [@TamerAltah86075](https://forums.knack.com/u/TamerAltah86075)\
**Post date:** [February 23, 2021, 12:41pm UTC](https://forums.knack.com/t/progress-bar-field/9577/2 "2021-02-23T12:41:52Z")

</div>

Below is an example how to control color.  
&nbsp;

**Change** _#view\_10_ to your table view and **change** &nbsp; _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;
}
```

---

<div class="post-metadata">

**Author:** ![RobBassett48728](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/robbassett48728/32/335_2.png) [@RobBassett48728](https://forums.knack.com/u/RobBassett48728)\
**Post date:** [October 21, 2019, 12:24am UTC](https://forums.knack.com/t/progress-bar-field/9577/3 "2019-10-21T00:24:07Z")

</div>

how would I attach this to the applicable value?

---

<div class="post-metadata">

**Author:** ![TonyLewis75327](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/tonylewis75327/32/261_2.png) [@TonyLewis75327](https://forums.knack.com/u/TonyLewis75327)\
**Post date:** [April 22, 2019, 8:08am UTC](https://forums.knack.com/t/progress-bar-field/9577/4 "2019-04-22T08:08:32Z")

</div>

\<progress value="22" max="100"\>\</progress\>&nbsp;

&nbsp;

Thats the correct implementation of this.&nbsp;

---

<div class="post-metadata">

**Author:** ![GSergeant](https://avatars.discourse-cdn.com/v4/letter/g/a87d85/32.png) [@GSergeant](https://forums.knack.com/u/GSergeant)\
**Post date:** [February 5, 2018, 12:08am UTC](https://forums.knack.com/t/progress-bar-field/9577/5 "2018-02-05T00:08:00Z")

</div>

If you want to&nbsp;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.

---

<div class="post-metadata">

**Author:** ![DavidVoet86508](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/davidvoet86508/32/610_2.png) [@DavidVoet86508](https://forums.knack.com/u/DavidVoet86508)\
**Post date:** [September 17, 2017, 5:21am UTC](https://forums.knack.com/t/progress-bar-field/9577/6 "2017-09-17T05:21:02Z")

</div>

How do you create the progress bar?