Share
Explore

icon picker
Progress rings (and pies) for Coda!

A demo doc for the Progress Rings Pack

💡 Context

As we all know, Coda already provides very nice native progress bars such as this one:
000
35
...but I thought that, in some situations, a more compact way of displaying the progress or status of a process could come in handy.
I’ve just started my journey into Coda, so after a glimpse at the way it handles images, particularly (SVG), I felt compelled to build that adds a formula and a column format to generate progress rings and pies, such as these:
ProgressRing(0.75)
ProgressRing(0.75,drawPie: true)

💍 The ProgressRing() formula

The ProgressRing() formula provides 13 parameters to allow for some degree of customization, even though only the first one is actually mandatory. Let’s have a look at them now:
Parameter
Description
Type
Defaults to
1
value
Value to represent
Number
Mandatory
2
max
Maximum value
Number
1
3
fillColorLight
Filled color in light mode
SVG named color or #RRGGBB
purple
4
emptyColorLight
Empty color in light mode
SVG named color or #RRGGBB
lightgray
5
fillColorDark
Filled color in dark mode
SVG named color or #RRGGBB
purple
6
empyColorDark
Empty color in dark mode
SVG named color or #RRGGBB
dimgray
7
radius
Radius of ring/pie
Pixels
100
8
thickness
Stroke width used to draw the ring arcs.
Pixels
75
9
drawPie
Draws a pie instead of a ring
True or False
False
10
steps
Number of circular sections of the ring/pie
Number
16
11
stepRounding
Type of rounding applied to value to determine the ring/pie section to draw as filled.
downRounds down
nearNearest rounding
upRounds up
round
12
avoidFalseComplete
Will never draw a full ring/pie if value not equal to max, regardless stepRounding mode.
True or False
True
13
avoidFalseEmpty
Will always draw the first outer ring/pie section filled if value greater than 0, regardless stepRounding mode.
True or False
False
There are no rows in this table
📝 Autocomple for selected 100 colors out of the palette is provided.
🌓 Light/Dark mode appearance will automatically toggle the colors used in progress rings.

⚙️ Some examples

Straightforward use

In its simple form, you only need to provide a value between 0 and 1 to create a progress ring with all the default values for the rest of the parameters.
ProgressRing(0.60)

Optional parameters

There are a lot of parameters that you may not want to use, in that case just set their values by name (yes, Coda rocks!):
ProgressRing(0.60, thickness: 50, fillColorLight: "darkblue")

Table and canvas formulas

To use progress rings inside a table, simply insert a new column, type your progress ring formula and adjust the column width for the desired visual result (the ring will grow and shrink accordingly).
💡 Add a canvas progress ring to summarize the information inside the table!

Yearly progress
Campaigns and actions
1
2
3
Done
Project
Scheduled
Completed
Ring
Pie
Campaign 1
10
0
Campaign 2
15
8
Campaign 3
5
5
There are no rows in this table
Ring column:
ProgressRing(Completed, Scheduled)
Pie column:
ProgressRing(Completed, Scheduled, drawPie: true, EmptyColorLight: "blanchedalmond", fillColorLight: "darkblue")
Yearly progress canvas formula:
ProgressRing([Campaigns and actions].Filter(Done.Count(), [Campaigns and tasks].Count())

Column format

This pack also provides a column format that will display a progress ring with default values for all the optional parameters.
Project status
Project
Status
Copy of Status
1
Project 1
15%
2
Project 2
30%
3
Project 3
99%
There are no rows in this table

Status indicators

Set steps to a value of 1 to turn your progress ring into a binary status indicator.
Workshop availability
Project
Enrolled
Total seats
👥
1
Workshop 1
0
10
2
Workshop 2
32
65
3
Workshop 3
10
10
4
Workshop 4
4
5
There are no rows in this table
Status column formula:
ProgressRing(Enrolled, [Total seats], steps: 1, drawPie: true, fillColorLight: "red", emptyColorLight: "green", fillColorDark: "red", emptyColorDark: "green")

⚗️ Formula playground

You can experiment and familiarize yourself with the behaviour of all the parameters using this playground.
value
000
0.5
fillColorLight
purple
emptyColorLight
lightgray
radius
100
drawPie
no
avoidFalseComplete
yes
stepRounding
near
max
1
fillColorDark
purple
emptyColorDark
dimgray
thickness
75
steps
16
avoidFalseEmpty
yes
Back to default optional params

☝️ Next steps and comments

This little thing has been made just for the sake of going through the whole process of building and publishing a Pack and get some fun along that learning path, so honestly I don’t have that many great plans for it. But anyway, these are a couple of optional features that I might add at some point in the future:
Change the color of the filled part of the ring according to a set of breakpoint values to better depict progress.
Display the value, or maybe value / max percentage, as a text element next or even inside (provided there is enough room) progress rings.
You can get the source code of the latest release in this 🐙 .
Please, feel free to reach out to me for any Coda-related things → .


Duplicate this doc
Sign up for Coda

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.