Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Progress

Displays an indicator showing the completion progress of a task.

Usage
example.blade.php 
<x-slate::progress :value="33" class="w-full max-w-md" />

Values
example.blade.php 
<div class="grid w-full max-w-md gap-4">
    <x-slate::progress :value="10" />
    <x-slate::progress :value="45" />
    <x-slate::progress :value="80" />
    <x-slate::progress :value="100" />
</div>

Custom max
Uploading 40 / 80 MB
example.blade.php 
<div class="w-full max-w-md space-y-2">
    <div class="flex justify-between text-sm text-muted-foreground">
        <span>Uploading</span>
        <span>40 / 80 MB</span>
    </div>
    <x-slate::progress :value="40" :max="80" />
</div>

API Reference
Prop Type Default Description
value number 0 Current progress value
max number 100 Maximum value
as string div Root HTML element

Width is filled from the inline start edge, so it tracks correctly in RTL.

Last updated .