Progress & Spinner

Indicadores de progresso e carregamento do sistema HalfByte — sempre retangulares, sempre com valor numérico.

Progress

Barra de progresso linear, determinada ou indeterminada.

<script setup lang="ts">
import { Progress } from '@halfbyte/maka'
</script>

<template>
  <Progress :value="65" label="Upload" />
</template>

Exemplos

<Progress :value="30" label="30%" />
<Progress :value="65" label="Com valor" />
<!-- Indeterminado: omitir value -->
<Progress label="Carregando…" />
<Progress :value="80" size="sm" label="Small" />
<Progress :value="80" size="lg" label="Large" />

Estados e cores

<Progress :value="45" label="Default" />
<Progress :value="62" label="Uploading" :striped="true" />
<Progress :value="100" label="Concluído" tone="success" />
<Progress :value="34" tone="error" :caption="{ left: 'erro', right: 'tentar novamente' }" />
<Progress :value="71" color="black" />

Props

Prop	Tipo	Padrão
value	number	—
min	number	0
max	number	100
indeterminate	boolean	false
size	"sm" | "md" | "lg"	"md"
color	"blue" | "black" | "lime"	"blue"
tone	"default" | "success" | "warn" | "error"	"default"
striped	boolean	false
label	string	—
showValue	boolean	true
caption	{ left?: string; right?: string }	—
formatValue	(v: number, max: number) => string	—
disabled	boolean	false

value omitido ou indeterminate: true → barra no modo indeterminado. value === max → tone="success" aplicado automaticamente. Não remova o componente imediatamente — mostre 100% por ~1s antes.

---

Spinner

Indicador de carregamento — três blocos quadrados pulsando em sequência. Sem círculos.

<script setup lang="ts">
import { Spinner } from '@halfbyte/maka'
</script>

<template>
  <Spinner size="md" label="Carregando dados…" />
</template>

Tamanhos

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />

Props

Prop	Tipo	Padrão
size	"xs" | "sm" | "md" | "lg" | "xl"	"md"
label	string	"Carregando…"