-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Rounded QCircularProgress should take into account behaviour of stroke-linecap #16586
Comments
This is the code pen that should explain what I mean: https://codepen.io/hazzik/pen/QWYMzKy <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> |
And how would you solve the near 100% values. Because you would need to change the cap curve or have a non-continuous 100% |
@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. 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> |
If you can please make a PR for this |
…ed QCircularProgress quasarframework#16586 (ref quasarframework#16593)
…r rounded style (#16593) * fix(QCircularProgress): account for behavior of stroke-linecap * refactor(QCircularProgress): improve readability * Update QCircularProgress.js --------- Co-authored-by: Razvan Stoenescu <razvan.stoenescu@gmail.com>
What happened?
When
QCircularProgress
withrounded
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?
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
The text was updated successfully, but these errors were encountered: