SProgress <s-progress>

Una barra de progreso que muestra cuánto ha avanzado una tarea hacia su valor máximo. SProgress es el wrapper de Vue 3 tipado del web component <s-progress> de Shopify Polaris.

import { SProgress } from 'polaris-vue-elements'

Buenas prácticas

• Úsala para trabajo que puedas medir. Recurre a una barra de progreso cuando puedas expresar el trabajo como parte de un todo. Cuando no sepas cuánto tardará algo ni cuánto ha avanzado, un spinner es la opción más ligera.
• Nombra lo que avanza. Da a accessibilityLabel una descripción precisa, por ejemplo "Importing products" o "Storage used". Los lectores de pantalla anuncian la barra con esa etiqueta, y no hay ningún valor predeterminado si la omites.
• Añade texto cuando las cifras importen. La barra no muestra por sí misma ninguna etiqueta ni porcentaje, así que coloca texto junto a ella cuando los comerciantes necesiten las cifras, y mantén ese texto sincronizado con value.
• Define max con el total real. Usa el recuento o el límite real, como cuántos archivos hay o el tamaño de una cuota, en lugar de convertirlo todo en un porcentaje. Así resulta sencillo actualizar value a medida que avanza el trabajo.
• Usa el tono solo para señalar problemas. Reserva tone="critical" y tone="warning" para progresos que indiquen un problema, como un límite que se ha agotado. Deja el trabajo en curso habitual con el tono predeterminado.

<SProgress accessibilityLabel="Importing products" :value="120" :max="300" />
<SText>120 of 300 products imported</SText>

Consulta las buenas prácticas de Shopify para <s-progress> (en inglés) para ver todas las recomendaciones.

Ejemplo

Upload next file (40%)

<script setup>
import { ref } from 'vue'
import { SProgress, SButton } from 'polaris-vue-elements'

const uploaded = ref(40)

function advance() {
  uploaded.value = Math.min(uploaded.value + 20, 100)
}
</script>

<template>
  <!-- determinate: bind numeric props, don't write them as string attributes -->
  <SProgress accessibilityLabel="Import progress" :value="uploaded" :max="100" />

  <!-- toned -->
  <SProgress accessibilityLabel="Sync progress" tone="success" :value="80" :max="100" />

  <!-- indeterminate: omit `value` entirely -->
  <SProgress accessibilityLabel="Preparing export" />

  <SButton @click="advance">Upload next file ({{ uploaded }}%)</SButton>
</template>

Props

Prop	Tipo	Descripción
accessibilityLabel	string	Una etiqueta que describe el propósito o el contenido del componente para tecnologías de asistencia como los lectores de pantalla. Úsala para aportar contexto adicional cuando el contenido visible por sí solo no transmite con claridad qué está progresando.
max	number	Cuánto trabajo requiere la tarea en total. Debe ser mayor que 0.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	El significado semántico y el tratamiento de color del componente. - auto: se determina automáticamente según el contexto. - neutral: información general sin una intención específica. - info: contenido informativo o consejos útiles. - success: resultados positivos o estados de éxito. - caution: avisos que requieren atención. - warning: advertencias importantes sobre posibles problemas. - critical: problemas urgentes o acciones destructivas.
value	number	Cuánto de la tarea se ha completado, como un número entre 0 y max. Sin un value, el progreso es indeterminado: la tarea está en curso sin ninguna indicación de cuánto se espera que tarde.