在具有相同类的多个div上启动ProgressBar

Question

I'm trying to use ProgressBar.js Plugin on multiple divs with same class form-progress

My html code is,

<div class="form-progress"></div>

And javascript code is,

    var form_progress = new ProgressBar.Circle('.form-progress', {
        color: '#475365',
        trailColor: '#CDD0D6',
        strokeWidth: 4,
        trailWidth: 2,
        easing: 'easeInOut',
        duration: 1400,
        text: {
            autoStyleContainer: false
        },
        from: {color: '#196ABC', width: 4},
        to: {color: '#196ABC', width: 4},
        // Set default step function for all animate calls
        step: function (state, form_progress) {
            form_progress.path.setAttribute('stroke', state.color);
            form_progress.path.setAttribute('stroke-width', state.width);

            var value = Math.round(form_progress.value() * 100);
            if (value === 0) {
                form_progress.setText('');
            } else {
                form_progress.setText(value + "%");
            }

        }
    });
    form_progress.animate(0.16);

But it is initiating only on first class form-progress, not others.

What is wrong in this?

Answer 1

You will need to invoke the ProgressBar.Circle constructor function for each instance you need.

Currently your code:

var form_progress = new ProgressBar.Circle('.form-progress', {
    ....
});

... is only invoking one instance of the constructor function (plugin). Even though you are specifying the classname .form-progress after new ProgressBar.Circle the plugin is only finding the first instance of this element and not all of them.

Briefly looking at the documentation for the ProgressBar API there doesn't appear to be a way to reference all instances of the classname .form-progress.

You could try modifying your JavaScript code as follows:

// This will hold all the final instances of the plugin: ProgressBar.Circle
var myWidgetInstances = {} 

// Wrap your original code inside a function that recieves a newClassName parameter.
var createInstance = function(newClassName, index) {
    var form_progress = new ProgressBar.Circle('.' + newClassName, { // <-- Reference the new class name.
        color: '#475365',
        trailColor: '#CDD0D6',
        strokeWidth: 4,
        trailWidth: 2,
        easing: 'easeInOut',
        duration: 1400,
        text: {
            autoStyleContainer: false
        },
        from: {
            color: '#196ABC',
            width: 4
        },
        to: {
            color: '#196ABC',
            width: 4
        },
        // Set default step function for all animate calls
        step: function (state, form_progress) {
            form_progress.path.setAttribute('stroke', state.color);
            form_progress.path.setAttribute('stroke-width', state.width);

            var value = Math.round(form_progress.value() * 100);
            if (value === 0) {
                form_progress.setText('');
            } else {
                form_progress.setText(value + "%");
            }
        }
    });

    // Add this instance to a myWidgetInstances object so it can be referenced later;
    myWidgetInstances['form_progress-' + index] = form_progress;
}

// Obtain a reference to all the DOM elements with a classname '.form-progress'.
var all_instances = [].slice.call(document.querySelectorAll('.form-progress'));

// Loop through each instance of a DOM element with a classname '.form-progress'
all_instances.forEach(function(element, index) {

    // Create a new classname. The same as before except
    // with a number suffix.
    var newClassName = 'form-progress-' + index;

    // Add the new classname to the DOM element.
    element.classList.add(newClassName);

    // Invoke the createInstance function passing
    // the 'newClassName' as an argument.
    createInstance(newClassName, index);
});

// The following assumes there are atleast three 
// html div tags as follows:
// 
// <div class="form-progress"></div>

// Now set the animate value for each instance.
myWidgetInstances['form_progress-0'].animate(0.1);
myWidgetInstances['form_progress-1'].animate(0.2);
myWidgetInstances['form_progress-2'].animate(0.3);

Hope this helps!