I have one question about using gradient effect with your circle-progress css like below picture.

[legion7298]

How can I express it?

Could you plz... Sugguest a way? ToT

[tigrr]

Circle Progress is made with SVG. Unfortunately you can't use CSS gradients on SVG elements.

[kulbabskyy]

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>

[tigrr]

@albalirus's suggestion works indeed. See a demo on JSFiddle. If using this approach, please keep in mind:

1. The gradient will go from side to side, not along the arc.
2. 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 thanks a lot for your input.

[kulbabskyy]

@tigrr this is good news! Thank you for testing. It is possible to add this gradient feature to the library?

[tigrr]

@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]

@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.

Hi @tigrr I found very interested technique to make a gradient along the stroke )) https://bl.ocks.org/mbostock/4163057

[tigrr]

@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.

Hi @tigrr I found very interested technique to make a gradient along the stroke )) https://bl.ocks.org/mbostock/4163057

@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]

@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.

Hi @tigrr I found very interested technique to make a gradient along the stroke )) https://bl.ocks.org/mbostock/4163057

@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.

The first our example is very nice i think. And its not hard to implement in the library. https://jsfiddle.net/tikosar/rcu30s82/