DocsComponentsProgress
Progress
A progress bar from 0 to 100.
1 file
<pb-ui.progress :value="66" class="w-3/5" />Installation
pyblade-ui add progress- Copy this file into your projectcomponents/ui/progress.html
@props({'value': 0}) <div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ value }}" data-slot="progress" {{ attributes.cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20") }}> <div class="h-full w-full flex-1 bg-primary transition-all" style="transform: translateX(-{{ 100 - min(max(int(value), 0), 100) }}%)"></div> </div> - Update the path to fit your project
The
componentsfolder is the one set inpyblade.toml.
Usage
The tag <pb-ui.progress> is available in all your templates.
<pb-ui.progress :value="66" />Examples
Several values
<div class="grid w-3/5 gap-4">
<pb-ui.progress :value="15" />
<pb-ui.progress :value="50" />
<pb-ui.progress :value="90" />
</div>Props
| Prop | Default |
|---|---|
| value | 0 |
Any other attribute (class, id, x-on:click, hx-post…) is passed to the root element; your Tailwind classes win over the component's.