Gradient

[Avishaidev]

Please can you explain how to create gradient as at demo? Thanks

[crisbeto]

You can check out the demo's source code. You're supposed to put an SVG element, containing the gradient, somewhere on the page:

<svg>
  <linearGradient id="your-gradient-id" x1="0" x2="0" y1="0" y2="1">
    <stop offset="5%"  stop-color="green"/>
    <stop offset="95%" stop-color="gold"/>
  </linearGradient>
</svg>

Afterwards you pass the gradient id to the progress circle:

    <round-progress
      [current]="current"
      [max]="max"
      color="url(#your-gradient-id)"></round-progress>

[sejr]

Has anyone had issues when trying to implement this dynamically? I have a bunch of pre-defined gradients and I am trying to switch between them. For some reason, only the first gradient is working.

[crisbeto]

Do the gradients have unique ids?

[sejr]

@crisbeto Yes they do. I am going to try one possible work-around; if that doesn't work I can provide an update with a JSFiddle or something.

[mmgmail]

I found the solution very simply just leave the color empty like this <round-progress ... color="" ...> </round-progress>

In the global html, add a gradient

<svg width="0px" height="0px" style="position:absolute;left: -9999px;"> <defs> <linearGradient id="progressCircle1" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="#39eeff"/> <stop offset="100%" stop-color="#4da0ff"/> </linearGradient> </defs> </svg>

In styles write just url (id)

.round-progress path { stroke: url(#progressCircle1); }

[paresh2190]

@crisbeto Thanks! Works For me

[diangogav]

@crisbeto Thanks!

[carlosminatoro]

@mmgmail thanks!, works for me

[hscheuerle]

It seems like rerenders on some web browsers get annoyed that ids are being redefined, so going to try putting the definition globally like in the replies here.