@props([
'porcentaje' => 70,
])

<div class="w-full max-w-xl mx-auto mb-10">
    <div class="bg-gray-200 h-4 rounded-full overflow-hidden relative">
        <div class="absolute inset-0 bg-gradient-to-r from-sky-500 via-sky-400 to-sky-600 animate-progress-loading
        dark:from-cyan-600 dark:via-cyan-300 dark:to-cyan-700" style="width: {{ $porcentaje }}%;" id="progress-bar">
        </div>
    </div>
</div>

<style>
    @keyframes progress-loading {
        0% {
            background-position: 0% 0%;
        }

        100% {
            background-position: 200% 0%;
        }
    }

    .animate-progress-loading {
        background-size: 200% auto;
        animation: progress-loading 2s linear infinite;
    }
</style>