ProgressCircle

Used to display a task’s progress in a circular form.

Demo

React

Color schemeNeutralPrimarySecondarySuccessWarningDanger

SizeExtra SmallSmallMediumLargeExtra Large

Indeterminate

Value

With text

Vue

Color schemeNeutralPrimarySecondarySuccessWarningDanger

SizeExtra SmallSmallMediumLargeExtra Large

Indeterminate

Value

With text

Usage

React

import {
  useEffect,
  useState,
} from 'react';
import { ProgressCircle } from '@fintech-sandpit/ui/react';

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 (
  <ProgressCircle
    colorScheme="primary"
    value={value}
    bordered
    withText
  />
);

import { ProgressCircle } from '@fintech-sandpit/ui/react';

return (
  <ProgressCircle defaultValue={null} />
);

Vue

<script setup lang="ts">
import {
  onUnmounted,
  ref,
} from 'vue';
import { ProgressCircle } from '@fintech-sandpit/ui/vue';

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>
  <ProgressCircle
    :value="value"
    color-scheme="primary"
    bordered
    with-text
  />
</template>

<script setup lang="ts">
import { ProgressCircle } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <ProgressCircle :default-value="null" />
</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
boxSize	CssUnit		—	Progress bar box size 2
thickness	CssUnit		—	Progress bar thickness 3
withText	boolean		false	Whether to show a value inside the circle

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
box-size	CssUnit		—	Progress bar box size 2
thickness	CssUnit		—	Progress bar thickness 3
with-text	boolean		false	Whether to show a value inside the circle

1. If value is null, the progress will be indeterminate, causing the progress circle to spin indefinitely.
2. If provided, the size prop will be ignored.
3. Makes sense only if box size is provided.

Types

type ColorScheme = 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
type CssUnit = `${number}${'px' | 'em' | 'rem' | 'vw' | 'vh' | 'vmin' | 'vmax' | '%'}`
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'