SProgress <s-progress>

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

Example

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	Type	Description
accessibilityLabel	string	A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey what is progressing.
max	number	How much work the task requires in total. Must be greater than 0.
tone	"auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical"	The semantic meaning and color treatment of the component. - auto: Automatically determined based on context. - neutral: General information without specific intent. - info: Informational content or helpful tips. - success: Positive outcomes or successful states. - caution: Advisory notices that need attention. - warning: Important warnings about potential issues. - critical: Urgent problems or destructive actions.
value	number	How much of the task has been completed, as a number between 0 and max. Without a value the progress is indeterminate: the task is ongoing with no indication of how long it is expected to take.