A linear progress ring is dead for long limits.
Our post box has a 4000 character limit. Most posts are tiny next to that. A straight ring would show just 2.5% for a 100 character post. It would feel broken.
The fix is a log curve:
Empty box: the ring stays dashed.
First keystroke: the dashes give way to a solid ring that fills clockwise.
Early typing gives fast, clear feedback. Near the limit it slows down and closes only at 4000, so it never looks full too soon.
One SVG circle, no layout shift, no new dependencies.
progress = ln(1 + n) / ln(1 + max) typed ring filled 10 ~29% 100 ~56% 1000 ~83% 4000 100%
Small PR raised: https://github.com/nunomaduro/dev-null.sh/pull/659
GitHubfeat: fill the avatar ring as a post grows toward its limit by jigar-dhulla · Pull Request #659 · nunomaduro/dev-null.shScreen.Recording.2026-10-19.at.11.55.12.PM.mov The composer avatar used a dashed border that turned solid after three characters. It now stays dashed while the box is empty. Once ...
commit 23c5e22
Or it could just run two circles? First time it fills based on the short post, the max characters before the "read more" link renders. Then once that limit is exceeded, the ring fills a second time (different color, or wider), but matching the absolute limit.