Entropizer Demos

Password:

---

JS

$('#meter1').entropizer({ target: '#password1' });

Password:

---

JS

$('#meter2').entropizer({
    target: '#password2',
    update: function(data, ui) {
        ui.bar.css({
            'background-color': data.color,
            'width': data.percent + '%'
        });
    }
});

---

CSS

#meter2 .entropizer-track {
    background-color: #e8e8e8;
    border-radius: 2px;
    height: 4px;
}
#meter2 .entropizer-bar {
    height: 4px;
}

Password:

---

JS

var max = 80;
$('#meter3').entropizer({
    target: '#password3',
    maximum: max,
    buckets: [
        { max: 20, suffix: 'danger' },
        { min: 20, max: 40, suffix: 'warning' },
        { min: 40, max: 60, suffix: 'success' },
        { min: 60, suffix: 'info' }
    ],
    create: function(container) {
        var wrapper = $('<div>').addClass('progress progress-striped').appendTo(container);
        var bar = $('<div>').addClass('progress-bar')
            .attr({
                'role': 'progressbar',
                'aria-valuemin': 0,
                'aria-valuemax': max
            })
            .appendTo(wrapper);
        return {
            wrapper: wrapper,
            bar: bar
        };
    },
    update: function(data, ui) {
        ui.bar.css({
                'width': data.percent + '%'
            })
            .attr({
                'aria-valuenow': data.entropy
            })
            .text(data.entropy.toFixed(0));
        ui.bar[0].className = 'progress-bar progress-bar-' + data.suffix;
    },
    destroy: function(ui) {
        ui.wrapper.remove();
    }
});