Tengo un enlace de llamada modal y un modal como se muestra a continuación:
<!-- modal caller --> <a href="#" data-toggle="modal" data-target="#modal">CALL MODAL</a> <!-- modal --> <div id="modal" class="modal auto-hide-modal" data-time="3000" data-backdrop="static" data-keyboard="false" tabindex="-1"> <div class="modal-dialog modal-xl modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">MY TITLE</h5> </div> <div class="modal-body">MY TEXT</div> <div class="modal-footer"> <div class="progress" style="height: .25rem;"> <div id="time_indicator" class="progress-bar" role="progressbar"></div> </div> </div> </div> </div> </div>Y tengo estos scripts:
$(document).on('shown.bs.modal', '.auto-hide-modal', function () { var time = $(this).data('time'); $(this).delay(time).fadeOut(300, function () { $(this).modal('hide'); }); });Hasta aquí todo bien. Quiero que la barra de progreso (time_indicator) muestre el tiempo restante para que se cierre el modal.
Tienes que usar la función de animación jQuery y establecer la velocidad de la animación en el tiempo. y luego restablecer el ancho a 0; así que la próxima vez que abra el modal, la animación se realizará nuevamente.
CSS:
#time_indicator { width: 0; }JavaScript:
$(document).on('shown.bs.modal', '.auto-hide-modal', function () { var time = $(this).data('time'); $("#time_indicator").animate({width: "100%"}, time); $(this).delay(time).fadeOut(300, function () { $(this).modal('hide'); $("#time_indicator").css("width", 0); }); });