tigrr / circle-progress

Responsive, accessible, animated, stylable with CSS circular progress bar available as plain (vanilla) JS and jQuery plugin.
https://tigrr.github.io/circle-progress
MIT License
171 stars 44 forks source link

Can set value as Indeterminate #12

Open CeloHill opened 2 years ago

CeloHill commented 2 years ago

Hi, I'm using the progress-circle multiple times in a page. Do do so I set the value in data tag as <div class="nota-analise big circulo" data-score="9"> When I call my javascript it is called looking for that value. It don't work when their's no score set.

my javascript. var notas = cj('.nota-analise').all(); notas.forEach(function(nota){ var score = cj(nota).attr('data-score'); new CircleProgress(nota, { max: 1, max: 10, value: score, textFormat: 'value', indeterminateText: '--' }); });

doesn't matter what I set in value (null, undefined), it never set as indeterminated. Can you help me?

tigrr commented 2 years ago

Hello, Circle Progress replicates the behavior of the native progress element. The progress element cannot be reverted to indeterminate state by means of setting a property, but only by removing the "value" attribute. In Circle Progress there are of course no attributes as it is not an HTML element. Thus for now there is no way to set the state to indeterminate once a value has been assigned. I think the feature you are requesting is needed. However, in your use case, if I understand it correctly, you are only setting the value once at the initiation. So, you can simply skip the value property, like so:

var notas = cj('.nota-analise').all();
notas.forEach(function(nota){
    var score = cj(nota).attr('data-score');
    var options = { max: 1, max: 10, textFormat: 'value', indeterminateText: '--' }
    if (score) {
        options.value = score;
    }
    new CircleProgress(nota, options);
});