Turbine UI - Laravel and Tailwind CSS Progress Component

Alert Avatar Badge Burger Button Button Group Card Code Container Dropdown F A Q Grid Heading Input Input Group Label Link List Group Media Menu Modal Nav Link Navbar Progress Section Select Sidebar Stat Table Text Textarea Theme Switcher Toast Toggle

Progress

Show progress indicators

x-t-progress

Preview and Examples

Progress Default 50%

Progress Brand 50%

Progress Primary 50%

Progress Secondary 50%

Progress Success 50%

Progress Warning 50%

Progress Danger 50%

<x-turbine-ui-progress
    label="Progress Default"
    percentage="50"
    gradient
/>
 
<x-turbine-ui-progress
    label="Progress Brand"
    percentage="50"
    variant="brand"
/>
 
<x-turbine-ui-progress
    label="Progress Primary"
    percentage="50"
    variant="primary"
/>
 
<x-turbine-ui-progress
    label="Progress Secondary"
    percentage="50"
    variant="secondary"
/>
 
<x-turbine-ui-progress
    label="Progress Success"
    percentage="50"
    variant="success"
/>
 
<x-turbine-ui-progress
    label="Progress Warning"
    percentage="50"
    variant="warning"
/>
 
<x-turbine-ui-progress
    label="Progress Danger"
    percentage="50"
    variant="danger"
/>

Attributes

Name	Type	Options	Description
accent	boolean	true false	Adds an accent
border	boolean	true false	Adds a border
gradient	boolean	true false	Adds a gradient
label	string	string	Adds a text label
percentage	string	25 50 75 100	Display the percentage amount
ring	boolean	true false	Adds a ring
rounded	boolean	true false	Adds rounded corners
shadow	boolean	true false	Adds a shadow
size	string	xs sm md lg xl 2xl	Controls component scale
variant	string	default brand primary secondary success warning danger light dark	A variant is like a colour palette