ProgressBar

Used to display the progress status for a task in a horizontal bar.

Demo

React

Color schemeNeutralPrimarySecondarySuccessWarningDanger

SizeExtra SmallSmallMediumLargeExtra Large

Indeterminate

Value

Bordered

Vue

Color schemeNeutralPrimarySecondarySuccessWarningDanger

SizeExtra SmallSmallMediumLargeExtra Large

Indeterminate

Value

Bordered

Example

React

import {
  useEffect,
  useState,
} from 'react';
// Import component
import { ProgressBar } from '@fintech-sandpit/ui/react';
// Import styles (optional)
// Please note that the CSS file contains the styles for both the ProgressBar and ProgressCircle components.
import '@fintech-sandpit/ui/style/components/progress.css';

const [value, setValue] = useState(51);

// Your logic to update the value goes here
// For example, you can use a timer to update the value every second

useEffect(() => {
  () => {
    const timer = setInterval(() => {
      if (value < 100) {
        setValue(value + 1);
      }
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  },
  [
    value,
  ],
);

return (
  <ProgressBar
    colorScheme="primary"
    value={value}
    bordered
  />
);

Vue

<script setup lang="ts">
import {
  onUnmounted,
  ref,
} from 'vue';
// Import component
import { ProgressBar } from '@fintech-sandpit/ui/vue';
// Import styles (optional)
// Please note that the CSS file contains the styles for both the ProgressBar and ProgressCircle components.
import '@fintech-sandpit/ui/style/components/progress.css';

const value = ref(51);

// Your logic to update the value goes here
// For example, you can use a timer to update the value every second

const timer = setInterval(() => {
  if (value.value < 100) {
    value.value++;
  }
}, 1000);

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<template>
  <ProgressBar
    :value="value"
    color-scheme="primary"
    bordered
  />
</template>

Props

React

Name	Type	Required	Default	Description
value	number | null		—	Controlled progress value, between 0 and 100 1
defaultValue	number | null		—	Uncontrolled progress value, between 0 and 100 1
colorScheme	ColorScheme		neutral	Progress bar color scheme
size	Size		md	Progress bar size
bordered	boolean		false	Whether to show a border
ariaLabel	string		—	Aria label for the progress bar
ariaLabelledBy	string		—	Aria labelled by for the progress bar

Vue

Name	Type	Required	Default	Description
value	number | null		—	Controlled progress value, between 0 and 100 1
default-value	number | null		—	Uncontrolled progress value, between 0 and 100 1
color-scheme	ColorScheme		neutral	Progress bar color scheme
size	Size		md	Progress bar size
bordered	boolean		false	Whether to show a border
aria-label	string		—	Aria label for the progress bar
aria-labelled-by	string		—	Aria labelled by for the progress bar

1. If value is null, the progress will be indeterminate, causing the progress bar to spin indefinitely.

Types

type ColorScheme = 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'