Password strength meter with Semantic UI

Question

Please advice how to implement password strength meter with Semantic UI progress bar?

<div class="ui left icon input">
    <input type="password" class="form-control" name="password" id="password" placeholder="">
<i class="icon-lock teal icon"></i>
</div>
<div class="ui bottom attached progress">
    <div class="bar">
    </div>
</div>

Answer 1

Tutsplus has an awesome tutorial to calculate password strength using JavaScript which you can find here.

The tutorial will give you a score out of 100. Use this score to populate the progress bar in Semantic UI like this:

$('.progress').progress({
    percent: score
});