File: /var/www/vhost/disk-apps/alq-cali.bikenow.co/resources/views/tickets/view/time-indicator.blade.php
<style>
.circle-container {
position: relative;
width: 30px;
height: 30px;
margin: 0 auto;
}
.circle {
width: 100%;
height: 100%;
border-radius: 50%;
border: 5px solid #ccc;
box-sizing: border-box;
position: absolute;
}
.circle.progress {
border-color: transparent;
border-top-color: red;
animation: spin linear infinite;
}
.time-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 8px;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<div class="circle-container">
<div class="circle"></div>
<div class="circle progress"></div>
<div class="time-text" id="time-text">{{ $duration }}s</div>
</div>
<script>
// Duración en segundos
const duration = <?php echo $duration; ?>;
let remainingTime = duration;
// Selecciona el elemento al que quieres cambiar la animación
const elemento = document.querySelector('.circle.progress');
// Cambia la duración de la animación
elemento.style.animationDuration = duration + 's'; // Cambia a 30 segundos
// Actualizar el texto del tiempo
const timeText = document.getElementById('time-text');
setInterval(() => {
remainingTime--;
if (remainingTime <= 0) {
remainingTime = duration; // Reinicia el contador
}
timeText.textContent = remainingTime + 's';
}, 1000);
</script>