Radial Progressbar w/Rounded Square Caps?
I stumbled upon this CodePen and really like the design... It's easy enough to do radial progressbars with circular caps, but I can't think of a way to achieve it with rounded square caps.
Anyone know a way to accomplish this using CSS/SVG or perhaps a library that can already do it cleanly?
10 Replies
you can make a pseudo element for like a start cap and end cap. So you can round the corners on the pseudo elements.
Or you can make it full rounded. then you can just use a radial-gradient. I did something like that here
https://codepen.io/tok124/pen/NWQjrJq
Untitled
...
I'm familiar with the full-rounded/circle approach, that's not what I'm interested in. I'm not sure I follow your rounded square approach...
If you do a square pseudo element with a border-radius, it'll face the wrong direction at times... no? Also, I'd be like to be able to style it beyond a flat color...
My end-goal is a chart-like behavior with something like the attached image...
Appreciate the response, but that doesn't address my question... I'm already aware of how to do a radial progressbar... I'm asking, specifically, how to create rounded square endcaps.
Use an SvG in the shape and aspect ratio you want. You can use the svg directly or use as a mask on something like a pseudo element
Yeah, i believe SVG is the best option here
I've not done much with SVGs... got any examples or recommended reads to get me started?
Could look through something like svgrepo, but easiest would probably be to make your own in a vector software like Figma or illustrator or https://editor.method.ac/
Method Draw Vector Editor
Method Draw is an open source SVG editor for the web, you can use it online without signing up.
inkscape is great tool for svg
Using SVG circles you could create 3 circles for the "progress", giving the outer 2 a
stroke-linecap="round"and the center one a stroke-linecap="butt" (flat). You would need to adjust the radius and stroke-dasharray of each of the circles to create the illusion of a single bar with the "rounded square" caps you require.
A demo using JS to calculate the different stroke-dasharray:
https://codepen.io/cbolson/pen/abeXJGv