How can we round the bar ends?

[BenJackGill]

In your code examples all the bars have a square end.

Many designers need rounded ends.

Is it possible to make the ends of the bars rounded?

[MintSoup]

var bar = new ProgressBar.Line('#container');
bar.path.style.strokeLinecap = 'round';

Should work.

[BenJackGill]

Thanks for your help! Sorry for the late reply.

Unfortunately your code does not work for me.

Also I am now using SemiCircles and not straight bars, not sure if that changes anything.

The code below works for full circles, but on semiscircles only the top animation bar is rounded not the background bar. Any ideas how to get it working for both?

  bar.trail.setAttribute('stroke-linecap', 'round');
  bar.path.setAttribute('stroke-linecap', 'round');

In this jsFiddle you can see the problem easily: https://jsfiddle.net/rc24jwny/6/

I need everything to be rounded, the both ends of the red animation bar and also both ends of the grey background bar.

[jackdixonryan]

Setting the strokeLinecap property to round did round off the ends of my bars, though people should note that having the round linecap gives a circular progress bar a sort of sketched or drawn look as the lines waver a bit.