DocsComposantsSpinner
Spinner
A loading indicator.
1 fichier
<div class="flex items-center gap-6">
<pb-ui.spinner />
<pb-ui.spinner class="size-6" />
<pb-ui.spinner class="size-8 text-muted-foreground" />
</div>Installation
pyblade-ui add spinner- Copiez ce fichier dans votre projetcomponents/ui/spinner.html
<svg role="status" aria-label="Loading" data-slot="spinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" {{ attributes.cn("size-4 animate-spin") }}><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg> - Adaptez le chemin à votre projet
Le dossier
componentsest celui déclaré danspyblade.toml.
Utilisation
La balise <pb-ui.spinner> est disponible dans tous vos templates.
<pb-ui.spinner class="size-6" />Exemples
Dans un bouton
<div class="flex gap-2">
<pb-ui.button disabled><pb-ui.spinner /> Chargement…</pb-ui.button>
<pb-ui.button variant="outline" disabled><pb-ui.spinner /> Envoi</pb-ui.button>
</div>