一个简单的进度条，用于指示完成度或加载状态。
<flux:progress value="75" />将进度条包裹在 flux:field 中以添加标签和描述。若不显示可见标签，请在标签上使用 sr-only 以支持屏幕阅读器。
<flux:field> <flux:label>Upload progress</flux:label> <flux:progress value="42" color="blue" /> <flux:description>Uploading 3 of 7 files...</flux:description></flux:field>在标签中或进度条旁边内联显示当前值。
<flux:field> <flux:label> Storage <x-slot name="trailing"> <span class="tabular-nums">75%</span> </x-slot> </flux:label> <flux:progress value="75" /></flux:field><flux:field> <flux:label>Storage</flux:label> <div class="flex items-center gap-4 -mt-2"> <flux:progress value="75" /> <span class="text-sm tabular-nums ...">75%</span> </div></flux:field>使用 wire:model 将进度值绑定到属性，从而动态控制它。
<flux:slider wire:model="progress" /><flux:progress wire:model="progress" />|
属性
|
描述
|
|---|---|
| value |
当前进度值（0 到 max）。默认值：0。
|
| max |
最大值。默认值：100。
|
| color |
进度条填充颜色（例如 blue、red、green）。默认值：强调色。
|
|
CSS 变量
|
描述
|
|---|---|
| --flux-progress |
以原始数字形式表示的计算进度（0-100）。
|
| --flux-progress-percentage |
以百分比字符串形式表示的计算进度（例如 75%）。在内部用于设置进度条宽度。
|