Progression

Composants d'indication de progression, de chargement et d'états squelettes.

BcProgress

Barre de progression horizontale avec tailles de S à XL.

Tailles (S → XL)

vue

<BcProgress :value="40" size="s" />
<BcProgress :value="55" size="m" />
<BcProgress :value="70" size="l" />
<BcProgress :value="47" size="xl" variant="brand" />

Variantes

vue

<BcProgress :value="65" variant="neutral" />
<BcProgress :value="80" variant="success" />
<BcProgress :value="45" variant="warn" />
<BcProgress :value="90" variant="brand" />

Mode indéterminé

vue

<BcProgress :indeterminate="true" variant="brand" />

Mode strié animé

vue

<BcProgress :value="60" :striped="true" :animated="true" />

Avec label (slot `#label`)

vue

<BcProgress :value="72" variant="brand">
  <template #label="{ percentage }">
    <span>{{ Math.round(percentage) }}%</span>
  </template>
</BcProgress>

Avec label et pourcentage

vue

<script setup>
const progressRows = [
  { label: 'Documents KYB',      value: 100, variant: 'success' },
  { label: 'Configuration OIDC', value: 60,  variant: 'brand' },
  { label: 'Tests sandbox',      value: 25,  variant: 'warn' },
  { label: 'Score de risque',    value: 12,  variant: 'neutral' },
]
</script>

<div v-for="row in progressRows" :key="row.label" style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
  <span style="width: 180px; font-size: 14px;">{{ row.label }}</span>
  <BcProgress :value="row.value" :variant="row.variant" style="flex: 1;" />
  <span style="width: 40px; text-align: right; font-size: 13px; color: #888;">{{ row.value }}%</span>
</div>

Props — BcProgress

Prop	Type	Défaut	Description
`value`	`number`	`0`	Valeur courante (0–max)
`max`	`number`	`100`	Valeur maximale
`variant`	`"neutral" \| "warn" \| "success" \| "brand"`	`"neutral"`	Couleur de la barre
`size`	`"s" \| "m" \| "l" \| "xl"`	`"m"`	Epaisseur de la barre
`indeterminate`	`boolean`	`false`	Mode chargement indéterminé (animation)
`striped`	`boolean`	`false`	Remplissage strié
`animated`	`boolean`	`false`	Animation stripes (actif si `striped: true`)

Slot — BcProgress

Slot	Props	Description
`#label`	`{ value, max, percentage }`	Contenu affiché dans la barre

BcProgressV

Barre de progression verticale.

vue

<BcProgressV :value="65" variant="green" :height="100" :show-value="true" />

Props — BcProgressV

Prop	Type	Défaut	Description
`value`	`number`	`0`	Valeur courante
`max`	`number`	`100`	Valeur maximale
`height`	`number`	`120`	Hauteur en pixels
`variant`	`"brand" \| "green" \| "yellow" \| "red" \| "blue"`	`"brand"`	Couleur
`showValue`	`boolean`	`false`	Affiche la valeur en % sous la barre
`indeterminate`	`boolean`	`false`	Mode indéterminé

BcSpinner

vue

<BcSpinner size="sm" />
<BcSpinner size="md" />
<BcSpinner size="lg" />
<BcSpinner variant="gradient" />
<BcSpinner mode="dots" />

Props — BcSpinner

Prop	Type	Défaut	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Taille
`variant`	`"default" \| "gradient"`	`"default"`	Style visuel
`mode`	`"circle" \| "dots"`	`"circle"`	Mode d'affichage
`label`	`string`	`"Chargement"`	Label ARIA

BcSkeleton

Placeholder animé pendant le chargement des données. Génère automatiquement des lignes de largeurs décroissantes.

Démo interactive

vue

<!-- Skeleton de base : 3 lignes animées -->
<BcSkeleton :lines="3" :animated="true" />

<!-- Avec avatar -->
<BcSkeleton :lines="2" :avatar="true" />

<!-- Largeurs personnalisées -->
<BcSkeleton :lines="3" :widths="['100%', '80%', '60%']" />

Démo métier — card skeleton + table row skeleton

vue

<section class="skeleton-card-grid">
  <article v-for="card in 4" :key="card" class="skeleton-card">
    <BcSkeleton :lines="3" :animated="true" :widths="['82%', '45%', '70%']" />
  </article>
</section>

<section class="skeleton-table">
  <div v-for="row in 3" :key="row" class="skeleton-table-row">
    <div class="avatar-placeholder"></div>
    <BcSkeleton :lines="1" :animated="true" :widths="['68%']" />
    <BcSkeleton :lines="1" :animated="true" :widths="['32%']" />
  </div>
</section>

Props — BcSkeleton

Prop	Type	Défaut	Description
`lines`	`number`	`3`	Nombre de lignes
`avatar`	`boolean`	`false`	Affiche un cercle avatar à gauche
`animated`	`boolean`	`true`	Active l'animation shimmer
`widths`	`Array<string \| number>`	`[]`	Largeurs custom par ligne (ex: `['100%', '80%', 60]`)

Si widths est vide, la dernière ligne est à 72% et les autres à 100%.

Stepper (H / V)

Convention canonique :

BcStepperH = progression horizontale de parcours.
BcStepperV = progression verticale d'etapes.
BcStepper reste disponible comme alias retrocompatible de BcStepperH.

BcStepperH (horizontal)

Progression lineaire horizontale numerotee (onboarding).

Démo — 4 états

vue

<BcStepperH :steps="[
  { id: 'step-1', label: 'Création compte',   state: 'done' },
  { id: 'step-2', label: 'Vérification KYB',  state: 'active' },
  { id: 'step-3', label: 'Configuration API', state: 'pending' },
  { id: 'step-4', label: 'Activation',        state: 'error' },
]" />

Visuels attendus :

done : cercle vert + checkmark
active : cercle plein couleur brand (bleu)
pending : cercle gris, trait de connexion discret
error / bloque : cercle rouge + croix

BcStepperH/BcStepperV vs TimelineBcStepperH et BcStepperV suivent un plan d'etapes. BcTimeline sert a afficher un historique d'evenements date.

Variantes de taille (`size`)

vue

<BcStepperH size="sm" :steps="steps" />
<BcStepperH size="md" :steps="steps" /> <!-- défaut -->
<BcStepperH size="lg" :steps="steps" />

Variante marqueur personnalisé (icône au lieu du numéro)

vue

<BcStepperH :steps="steps">
  <template #marker="{ state, index }">
    <BcIcon v-if="state === 'done'" name="check" />
    <BcIcon v-else-if="state === 'active'" name="sparkles" />
    <span v-else>{{ index + 1 }}</span>
  </template>
</BcStepperH>

Props — BcStepperH

Prop	Type	Défaut	Description
`steps`	`StepItem[]`	`[]`	Tableau d'étapes
`clickable`	`boolean`	`false`	Rend les étapes cliquables
`ariaLabel`	`string`	`"Progression"`	Label ARIA du composant
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Taille des bulles et connecteurs

Slots — BcStepperH

Slot	Props	Description
`marker`	`{ step, index, state }`	Remplace le contenu de la bulle (numéro/picto)

Type StepItem

interface StepItem {
  id: string        // identifiant unique (requis)
  label: string     // libellé affiché
  state?: 'done' | 'active' | 'pending' | 'error'  // défaut: 'pending'
}

Events

Event	Payload	Description
`select`	`StepItem`	Étape cliquée (si `clickable: true`)

BcStepperV (vertical)

vue

<BcStepperV :steps="[
  { id: '1', title: 'Création dossier', desc: 'Terminé', state: 'done' },
  { id: '2', title: 'Vérification KYB', desc: 'En cours', state: 'active' },
  { id: '3', title: 'Configuration API', desc: 'En attente', state: 'pending' },
  { id: '4', title: 'Activation', desc: 'Bloqué', state: 'error' },
]" />

Variantes de taille (`size`)

vue

<BcStepperV size="sm" :steps="steps" />
<BcStepperV size="md" :steps="steps" /> <!-- défaut -->
<BcStepperV size="lg" :steps="steps" />

Props — BcStepperV

Prop	Type	Défaut	Description
`steps`	`VStep[]`	`[]`	Etapes verticales
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Taille des bulles et connecteurs

Slots — BcStepperV

Slot	Props	Description
`marker`	`{ step, index, state }`	Remplace le contenu de la bulle (numéro/picto)

Type VStep

interface VStep {
  id: string
  title: string
  desc?: string
  state?: 'done' | 'active' | 'error' | 'pending' | 'future'
}

Progression ​

BcProgress ​

Tailles (S → XL) ​

Variantes ​

Mode indéterminé ​

Mode strié animé ​

Avec label (slot #label) ​

Avec label et pourcentage ​

Props — BcProgress ​

Slot — BcProgress ​

BcProgressV ​

Props — BcProgressV ​

BcSpinner ​

Props — BcSpinner ​

BcSkeleton ​

Démo interactive ​

Démo métier — card skeleton + table row skeleton ​

Props — BcSkeleton ​

Stepper (H / V) ​

BcStepperH (horizontal) ​

Démo — 4 états ​

Variantes de taille (size) ​

Variante marqueur personnalisé (icône au lieu du numéro) ​

Props — BcStepperH ​

Slots — BcStepperH ​

Type StepItem ​

Events ​

BcStepperV (vertical) ​

Variantes de taille (size) ​

Props — BcStepperV ​

Slots — BcStepperV ​

Type VStep ​

Progression

BcProgress

Tailles (S → XL)

Variantes

Mode indéterminé

Mode strié animé

Avec label (slot `#label`)

Avec label et pourcentage

Props — BcProgress

Slot — BcProgress

BcProgressV

Props — BcProgressV

BcSpinner

Props — BcSpinner

BcSkeleton

Démo interactive

Démo métier — card skeleton + table row skeleton

Props — BcSkeleton

Stepper (H / V)

BcStepperH (horizontal)

Démo — 4 états

Variantes de taille (`size`)

Variante marqueur personnalisé (icône au lieu du numéro)

Props — BcStepperH

Slots — BcStepperH

Type StepItem

Events

BcStepperV (vertical)

Variantes de taille (`size`)

Props — BcStepperV

Slots — BcStepperV

Type VStep