Labels and gradient customization

[dkroondijk]

Hi, just have a couple of quick questions. I've been struggling to implement the following customizations.

• How do you change the gradient such that the second color is the end color of the circle? (ie. there would be a hard transition between the end and start color instead of fading back into the start color)
• How do I add a label/image to the end value of the progress bar?

I've added the image below for illustration.

Any help would be much appreciated!

[kottenator]

Hi! I will crete a snippet for you on this weekend (sorry, can't do this right now)

[dkroondijk]

Wow, thanks for the quick reply and thanks for your help, much appreciated! Great plugin btw!

[kottenator]

Here is my snippet.

Answering to your questions:

• you're looking for conical asymmetric gradient which is not available for <canvas> yet. But there is a way to make it - using image fill (that's what I do in my snippet)
• adding a label to the arc end point is a bit tricky - you have to calculate coordinates by yourself (see my snippet code)

[dkroondijk]

That's perfect! Thanks again so much for your help and your time.

[kottenator]

Here is an updated version of the snippet that also animates the value.

[GolovskoyNickolay]

Hi, how can I create this background square like in your examples?

[kottenator]

@PowerfulPaw : I didn't quite get you - what square?

[GolovskoyNickolay]

http://i.imgur.com/seDoWGK.png

[kottenator]

Oh, I see. That's a conical gradient - you can create it in many graphical editors (Photoshop, GIMP, etc). Sorry, I haven't found a good tutorial but I'm sure you'll handle it ;)

[GolovskoyNickolay]

Thanks for answer, I thought I could make it with CSS.

[kottenator]

Unfortunately, it's only in CSS4 draft yet :(