Progress

TThink of it as your personal cheerleader, showing how far you've come in tasks like downloading files or completing forms. It's like a high-five for your progress!

Adding the component

php artisan spur:add interactives/progress

If you use this to add the component, it will automatically add it to config/spur.php and auto-fetch the components files.

config/spur.php
"components": [
  'interactives/progress',
]

If you manually add the component in config/spur.php you would need to run
php artisan spur:fetch to import the component

Usage

Simple Progress 

<x-spur.progress percent="50"/>

Progress Sizes 

<x-spur.progress size="sm" percent="20"/>
<x-spur.progress size="md" percent="30"/>
<x-spur.progress size="lg" percent="40"/>
<x-spur.progress size="xl" percent="50"/>
<x-spur.progress size="2xl" percent="60"/>
<x-spur.progress size="3xl" percent="70"/>

Progress Style 

<x-spur.progress size="3xl" rounded="rounded" percent="60"/>
<x-spur.progress size="3xl" percent="70"/>

Progress with percent

60%
70% 
<x-spur.progress size="3xl" rounded="rounded" percent="60" showPercent/>
<x-spur.progress size="3xl" percent="70" showPercent/>

Progress Colors

15%
25%
35%
45%
55%
65% 
<x-spur.progress size="3xl" color="black" percent="15" showPercent/>
<x-spur.progress size="3xl" color="yellow" percent="25" showPercent/>
<x-spur.progress size="3xl" color="green" percent="35" showPercent/>
<x-spur.progress size="3xl" color="indigo" percent="45" showPercent/>
<x-spur.progress size="3xl" color="blue" percent="55" showPercent/>
<x-spur.progress size="3xl" color="red" percent="65" showPercent/>