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

Example

React

import {
  useEffect,
  useState,
} from 'react';
// Import component
import { ProgressCircle } 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 (
  <ProgressCircle
    colorScheme="primary"
    value={value}
    bordered
    withText
  />
);

Vue

<script setup lang="ts">
import {
  onUnmounted,
  ref,
} from 'vue';
// Import component
import { ProgressCircle } 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>
  <ProgressCircle
    :value="value"
    color-scheme="primary"
    bordered
    with-text
  />
</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'