enter image description here

How to do this correctly? I did it through pictures (but this is not correct), the very essence, so that the field for filling the gradient was dynamic, that is - I wanted to set 93%, I wanted 2% and so on.

    2 answers 2

    You can create an angular gradient using conic-gradient :

     .pie { background: conic-gradient(aqua, lime); border-radius: 50% }

    Examples of other gradients are here . And in the same place - the instruction on connection to the site. The fact is that conic-gradient is currently only accepted by W3C as part of CSS4 Images ( link ). Browsers do not support it yet. But you can use it now with the help of polyphyl .

    With a dynamic chart formation - more difficult. In CSS, a popular solution is to use two prepared halves of a circle for a diagram:

    enter image description here

    And, if you need more than 50% fullness - both halves are used. If less than 50% - one. This is solved by installing an additional class (for example, .big , for .pie ).

    Most likely, you will need a small js-script, which will look at how much% -filling is installed in .pie , and will put, or not put, an additional class.

    • And what browser support does conic-gradient have? - soledar10
    • In response, the phrase about support in browsers is a link: caniuse.com/#feat=css-gradients - but now I will check in other sources, I will clarify - Vitaly Yemelyantsev
    • Yes, you were right, thanks for the tip. conic-gradient so far only works with polyfil. Completed the answer. - Vitaly Emelyantsev

    This is the progress bar should come up https://github.com/kottenator/jquery-circle-progress Demo: http://kottenator.imtqy.com/jquery-circle-progress/

    Or find on request progressbar circle