Setting the circle to 100% width and height of parent element

[Deleted user]

Would be great to be able to set a % size. I'd like to set the circle to 100% width and height of parent element.

[Rostyslav Bryzgunov]

Well, it's possible. Here is an exemple.

I'd like to explain the principle.

You should set maximum possible size of the circle (because when you exceed the size, <canvas> will become blurry), e.g.:

$('#circle').circleProgress({
    size: 1000
});

After that, in CSS you should set width and height to be flexible, e.g.:

#circle canvas {
    max-width: 100%;
    max-height: 100%;
}

Now <canvas> inside the container will fit the size of the container. However, I don't recommend such method, because <canvas> resizing could give some antialising issues (probably) and it could be slower because actual <canvas> is very big.

[srajpal1990]

i put it in a div with responsive size and used jquery width function to set the size in the initialization. worked great!

[Patrick Nelson]

FYI, currently the documentation points to this issue, however the comment above references an example which is no longer working (this longer exists). Perhaps instead this example could be incorporated into the repository and hosted on Github Pages so it's more permanent? This is definitely an interesting point that has a lot of demand.

[Patrick Nelson]

Actually, found a working version of the link here: http://output.jsbin.com/gabeli/

[Rostyslav Bryzgunov]

Hi, @patricknelson! I'm glad that you've solved the problem by yourself, good job! ;)

Yes, some examples may become broken, and that's a bit of a risk. It'd be great to keep them inside project's code/docs. But to create full featured project docs, I need a lot of time.