Embed a progress bar from a record on my website?

For those of you who are not aware, Airtable has hidden an undocumented “progress bar” feature into 2 types of fields: the percentage field and the formula field (as long as your formula always results in a number, and never results in anything else).

You can access this progress bar feature by clicking on the “formatting” tab within the field’s settings.

Airtable lets you see this progress bar everywhere that Airtable lets you view data: in the data layer, in interfaces, in shared views, in embedded views, in embedded interfaces, in shared interfaces, etc.

However, as ​@oreocereus pointed out above, formatting features are not accessible via Airtable’s REST API. Only the underlying data (i.e. numbers, strings, dates, arrays, and URLs) is accessible via the API.

As a workaround, there is a little-known trick to create your own progress bars using emoji characters in a formula field.

And since emoji characters are simply strings of text, they will show up anywhere, including the REST API.

However, one caveat is that depending on the browser, the emojis might not always visually display the way that you would want them to appear. For example, you can often see tiny little spaces between the emoji characters.

In any case, I give a demonstration on how to do all of this on this Airtable podcast episode:

• Creating custom progress bars in Airtable using formula fields and emojis.

Hope this helps!

If you have a budget and you’d like to hire the best Airtable consultant to help you with this or anything else that is Airtable-related, please feel free to contact me through my website: Airtable consultant — ScottWorld

Hey ​@oreocereus,

If you ONLY want the progress bar, there is no easy way to just embed it without embedding the view/interface. 

You could however have some custome code probably to achieve that with only a few lines of code. What are you running your site on?

Mike

I have the same question! I’ve been trying to display a live progress bar for a percentage field from our database too, and it’s way more difficult than expected. Most tools either force you into full dashboards or interfaces with lots of extra UI that I don’t need.

I’ve explored Airtable Interfaces, embed blocks, some low-code tools, but either they don’t allow minimal embedding of just the progress bar or the cost is too high for what we need. Would love to hear of any lightweight, reasonably priced options or simple scripts that can pull a single record’s percentage field and show it as a progress bar on a webpage.

You can format a percentage field as a progress bar. Just go into the field settings and enable the option that says “Display as Progress Bar”.

Hope this helps!

If you have a budget and you’d like to hire the best Airtable consultant to help you with this or anything else that is Airtable-related, please feel free to contact me through my website: Airtable consultant — ScottWorld

Thanks for the quick reply! I actually already have the percentage field displayed as a progress bar within Airtable  what I’m trying to do is show that same progress bar externally on my website in real time. Unfortunately, Airtable’s built-in view and interface embeds show too much extra layout. But your suggestion does confirm I’m on the right track — I may need to look into custom embedding or automation options. Appreciate the help, and I’ll definitely check out your consulting page if I get stuck!