kimmobrunfeldt / kimmobrunfeldt/progressbar.js
Round trail corners on semiCircle
- Dominant language
- JavaScript
- Stars
- 7.9k
- Forks
- 1.4k
- PR merge metrics
- No merged PRs in 30d
Description
Hey,
there are couple of the same issues here but no one is really solved.
I'm using semiCircle and I want that the stroke and trail has rounder corners: https://jsfiddle.net/xapep/jfx46z9L/
But as you can see in the example, the trail has square ending.
But if check source code the path of trail has stroke-linecap="round" and when you rotate trail path you can see that it has round corner

What that means that the trail is bigger (length) as the viewBox so that's why everything gets cut off, even when you have bar.animate(1.0); // Number from 0.0 to 1.0 the stroke will not have round border anymore.
If I inline (inspect) change viewbox from 0 0 100 50 to 0 0 100 60 I can see the round corners for everything.
So is there any solution for this?
Thanks.
Contributor guide
Research direction
Start with the semiCircle behavior and the linked JSFiddle, then inspect how the trail path and its viewBox are configured. Done means the semiCircle stroke and trail retain visibly rounded corners at their ends, including when the bar reaches 1.0.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100