kimmobrunfeldt / kimmobrunfeldt/progressbar.js

Round trail corners on semiCircle

Open
#247 2 comments 0 reactions 0 assignees View on GitHub
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
![image](https://user-images.githubusercontent.com/1315340/62037002-38d28200-b1f3-11e9-9daa-232f68987d55.png)

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.