JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    <p>0%</p>
    <div class="bar">
        <div class="bar-loaded"></div>
    </div>
    
    <ul>
        <li>
            <label><input type="checkbox" /> Item 1</label>
        </li>
        <li>
            <label><input type="checkbox" /> Item 2</label>
        </li>
        <li>
            <label><input type="checkbox" /> Item 3</label>
        </li>
        <li>
            <label><input type="checkbox" /> Item 4</label>
        </li>
    </ul>
</div>

CSS

#box {
    width: 100%;
}

#box p {
    font-size: 18px;
}

#box .bar {
    width: 100%;
    height: 30px;
    background: #ededed;
}

#box .bar .bar-loaded {
    background: green;
    height: 30px;
    width: 0%;
}

JavaScript

$(function(){
	var total = $('input[type=checkbox]').length;
	
    $('input[type=checkbox]').on('change', function(){
        var selecionados = $('input[type=checkbox]:checked').length;
        
        var porcentagem = (selecionados/total) * 100;
        
        $('.bar-loaded').animate({
			width: porcentagem+'%'
        });
        
        $('#box p').html(porcentagem+'%');
    });
});