<tr th:each="planificacion : ${planificaciones}"
                        th:onclick="'window.location.href = '' + @{/planificacion/{idp}(idp=${planificacion.id})}+ '''">

                        <td th:text="${planificacion.nombre}"></td>
                        <td>
                            <div th:if="${planificacion.completado}">
                                <span class="badge badge-pill badge-success"
                                    style="font-size: 80%; padding: 6px 18px;">Completo</span>
                            </div>
                            <div th:if="${not planificacion.completado}">
                                <span class="badge badge-pill badge-danger"
                                    style="font-size: 80%; padding: 6px 18px;">Incompleto</span>
                            </div>
                        </td>
                        <td>
                            <div class="progress">
                                <div id="dynamic"
                                    class="progress-bar progress-bar-success progress-bar-striped active"
                                    role="progressbar" aria-valuenow="0" aria-valuemin="0"
                                    aria-valuemax="100" style="width: 0%">
                                    <span id="current-progress"></span>
                                </div>
                            </div>
                        </td>

<script>
    $(function() {
        var current_progress = document.getElementById("progreso").value;
        var interval = setInterval(function() {

            $("#dynamic").css("width", current_progress + "%").attr(
                    "aria-valuenow", current_progress).text(
                    current_progress + "%");

        }, 1000);
    });
</script>