You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
I have one question about using gradient effect with your circle-progress css like below picture. #8
i found how make a gradients, checked on the circle-progress library and its worked! here is snippet bellow!
<svg>
<!-- Gradient (just need to insert in the <svg> tag. The ID must be unique) -->
<linearGradient id="linear-gradient">
<stop offset="0%" stop-color="gold"/>
<stop offset="100%" stop-color="teal"/>
</linearGradient>
<!-- add this attribute instead circle stroke color -->
stroke="url(#linear-gradient)"
</svg>
@albalirus's suggestion works indeed. See a demo on JSFiddle.
If using this approach, please keep in mind:
The gradient will go from side to side, not along the arc.
You will have to include extra markup in your HTML or external SVG and then link that document correctly in your CSS. If both CSS and HTML are in the same file (CSS is inline) you can use fragment shorthand (e .g. #linear-gradient) for gradient URL rather than full path.
@albalirus, I am thinking about adding gradient to the library. The complication is that most people want gradient along the arc, and that doesn't seem possible.
@albalirus, I am thinking about adding gradient to the library. The complication is that most people want gradient along the arc, and that doesn't seem possible.
@albalirus, I am thinking about adding gradient to the library. The complication is that most people want gradient along the arc, and that doesn't seem possible.
@albalirus thank you for the suggestion and excuse me for late reply. The example you shared fragments the path into multiple small pieces. I think this approach would make it very hard (if possible) to implement animation. And even if implemented, the animation would be jerky.
@albalirus, I am thinking about adding gradient to the library. The complication is that most people want gradient along the arc, and that doesn't seem possible.
@albalirus thank you for the suggestion and excuse me for late reply. The example you shared fragments the path into multiple small pieces. I think this approach would make it very hard (if possible) to implement animation. And even if implemented, the animation would be jerky.
Hi @tigrr Yes, the animation will be unused in this case. This is just for example.
Activity
tigrr commentedon Aug 11, 2021
Circle Progress is made with SVG. Unfortunately you can't use CSS gradients on SVG elements.
kulbabskyy commentedon Oct 22, 2021
i found how make a gradients, checked on the circle-progress library and its worked! here is snippet bellow!
tigrr commentedon Oct 25, 2021
@albalirus's suggestion works indeed. See a demo on JSFiddle.
If using this approach, please keep in mind:
#linear-gradient) for gradient URL rather than full path.@albalirus thanks a lot for your input.
kulbabskyy commentedon Oct 25, 2021
@tigrr this is good news! Thank you for testing.
It is possible to add this gradient feature to the library?
tigrr commentedon Oct 25, 2021
@albalirus, I am thinking about adding gradient to the library. The complication is that most people want gradient along the arc, and that doesn't seem possible.
kulbabskyy commentedon Oct 28, 2021
Hi @tigrr I found very interested technique to make a gradient along the stroke ))
https://bl.ocks.org/mbostock/4163057
tigrr commentedon Feb 7, 2022
@albalirus thank you for the suggestion and excuse me for late reply. The example you shared fragments the path into multiple small pieces. I think this approach would make it very hard (if possible) to implement animation. And even if implemented, the animation would be jerky.
kulbabskyy commentedon Feb 7, 2022
Hi @tigrr Yes, the animation will be unused in this case. This is just for example.
The first our example is very nice i think. And its not hard to implement in the library.
https://jsfiddle.net/tikosar/rcu30s82/