HEX
Server: Apache/2.4.41 (Ubuntu)
System: Linux ip-172-31-42-149 5.15.0-1084-aws #91~20.04.1-Ubuntu SMP Fri May 2 07:00:04 UTC 2025 aarch64
User: ubuntu (1000)
PHP: 7.4.33
Disabled: pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare,
Upload Files
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>