Rounded QCircularProgress should take into account behaviour of stroke-linecap

[hazzik]

What happened?

When QCircularProgress with rounded attribute at near the max value then the circle is closed on wide lines.

What did you expect to happen?

I expect the component take into account that stroke-linecap attribute adds half circles at the edges of the line, so when calculating the length of the stroke the line height (stroke-width) must be considered and subtracted from the length.

Reproduction URL

https://codepen.io/hazzik/pen/JjxymYV?editors=1010

How to reproduce?

1. Open codepen

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar)

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[hazzik]

This is the code pen that should explain what I mean: https://codepen.io/hazzik/pen/QWYMzKy

Calculated for 98%:

<svg width="125" height="125" viewBox="0 0 125 125" 
     fill="none" xmlns="http://www.w3.org/2000/svg"
     style="transform: rotate3d(0, 0, 1, -90deg);"
     >
  
  <circle 
          cx="55"
          cy="55"
          r="50" 
          stroke="#E6E8E7"
          stroke-width="10"
  />
  <circle 
          cx="55"
          cy="55"
          r="50" 
          stroke="red"
          stroke-dasharray="314.159"
          stroke-dashoffset="6.283"
          stroke-width="10"
  />
  <circle 
          cx="55"
          cy="55"
          r="50" 
          stroke="#00965F"
          stroke-dasharray="297.876 16.283"
          stroke-dashoffset="-5"
          stroke-linecap="round"
          stroke-width="10"
  />
</svg>

[pdanpdan]

And how would you solve the near 100% values. Because you would need to change the cap curve or have a non-continuous 100%

[hazzik]

@pdanpdan, the SVG above demonstrating what I want to achieve. The red outline is the current unrounded progress, in green proposed solution.

In essence, the stroke is offset by negative half of stroke width. The stroke array will consist of two elements: line and a gap. Line is max(circumference * value - strokeWidth, 0) Gap is circumference - line

This is how it will look like for 99.9%

<svg width="125" height="125" viewBox="0 0 125 125" 
     fill="none" xmlns="http://www.w3.org/2000/svg"
     style="transform: rotate3d(0, 0, 1, -90deg);"
     >
  
  <circle 
          cx="55"
          cy="55"
          r="50" 
          stroke="#E6E8E7"
          stroke-width="10"
  />
  <circle 
          cx="55"
          cy="55"
          r="50" 
          stroke="red"
          stroke-dasharray="313.84510609362034452241807398962"
          stroke-dashoffset="0.31415926535897932384626433832795"
          stroke-width="10"
  />
  <circle 
          cx="55"
          cy="55"
          r="50" 
          stroke="#00965F"
          stroke-dasharray="303.84510609362034452241807398962 10.31415926535897932384626433832795"
          stroke-dashoffset="-5"
          stroke-linecap="round"
          stroke-width="10"
  />
</svg>

[pdanpdan]

If you can please make a PR for this

[hazzik]

@pdanpdan done: #16593, hopefully I done everything by the guidelines