SProgress <s-progress>

Uma barra de progresso que mostra quanto uma tarefa já avançou em direção ao seu valor máximo. SProgress é o wrapper de Vue 3 tipado do web component <s-progress> do Shopify Polaris.

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

Boas práticas

• Use para trabalhos que você consegue medir. Recorra a uma barra de progresso quando puder expressar o trabalho como parte de um todo. Quando não for possível saber quanto tempo algo vai levar ou quanto já avançou, um spinner é a opção mais leve.
• Diga o que está progredindo. Dê a accessibilityLabel uma descrição precisa, por exemplo "Importando produtos" ou "Armazenamento usado". Os leitores de tela anunciam a barra com esse rótulo, e não há valor padrão se você omiti-lo.
• Adicione texto quando os números importarem. A barra não mostra rótulo nem porcentagem por si só, então coloque um texto ao lado dela quando os lojistas precisarem dos números, e mantenha esse texto sincronizado com value.
• Defina max como o total real. Use a contagem ou o limite verdadeiro, como a quantidade de arquivos ou o tamanho de uma cota, em vez de converter tudo em porcentagem. Isso torna value simples de atualizar à medida que o trabalho avança.
• Use tone apenas para sinalizar problemas. Reserve tone="critical" e tone="warning" para progressos que indiquem um problema, como um limite que já foi atingido. Deixe o trabalho em andamento comum no tom padrão.

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

Veja as boas práticas da Shopify para <s-progress> (em inglês) para todas as recomendações.

Exemplo

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	Descrição
accessibilityLabel	string	Um rótulo que descreve a finalidade ou o conteúdo do componente para tecnologias assistivas, como leitores de tela. Use-o para fornecer contexto adicional quando o conteúdo visível sozinho não transmite com clareza o que está em andamento.
max	number	Quanto trabalho a tarefa exige no total. Deve ser maior que 0.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	O significado semântico e o tratamento de cor do componente. - auto: determinado automaticamente com base no contexto. - neutral: informações gerais sem uma intenção específica. - info: conteúdo informativo ou dicas úteis. - success: resultados positivos ou estados de sucesso. - caution: avisos de alerta que precisam de atenção. - warning: avisos importantes sobre possíveis problemas. - critical: problemas urgentes ou ações destrutivas.
value	number	Quanto da tarefa já foi concluído, como um número entre 0 e max. Sem um value, o progresso é indeterminado: a tarefa está em andamento sem nenhuma indicação de quanto tempo deve levar.