JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="checkbox"> Item 1
    <input type="checkbox"> Item 2
    <input type="checkbox"> Item 3
</div>

<div class="progress">
    <div class="progress_bar"></div>
</div>

CSS

.progress_bar {
    height:20px;
    background-color: blue;
    width: 0;
}

.progress {
    margin-top: 10px;
    width: 300px;
    border:solid 1px black;
}

JavaScript

$(function() {
    var checkbox = $(":checkbox"),
        checkbox_length = checkbox.length;
    
    checkbox.change(function () {
        var that = $(this),
            progress = 0,
            checked_length = 0;
        
        if(that.is(':last-child')) {
              that.siblings().attr('checked', true);
        }
        
        checked_length = $(":checkbox:checked").length;
        progress = checked_length / checkbox_length * 100;
        
       // $('.progress_bar').css('width', progress + '%');
        
        // just incase you wanted it to be a little bit fancy :P
        $('.progress_bar').animate({'width' : progress + '%'}, 400); 
    });
});