Progress

Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process.

Progress indicators inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates.

• Determinate indicators display how long an operation will take.
• Indeterminate indicators visualize an unspecified wait time. The animations of the components rely on CSS as much as possible to work even before the JavaScript is loaded.

Circular

Determinate

import { CircularProgress } from '@streamelements/frontend-ui';
...
<CircularProgress.Root value={25} size={50} />
...

Indeterminate

import { CircularProgress } from '@streamelements/frontend-ui';
...
<CircularProgress.Root variant="indeterminate" size={50} />
...

Text

import { CircularProgress } from '@streamelements/frontend-ui';
...
<CircularProgress.Root value={50} size={50}>
  <CircularProgress.Text>50</CircularProgress.Text>
</CircularProgress.Root>
...

API

The Chip component exposes the following props for style changes:

Root

Name	Type	Default value	Description
size	number	120	The size of the component in pixels
value	number	25	The value of the progress indicator for the determinate variant. Value between 0 and maxValue.
maxValue	number	100	The explicit value at the 100th percentile.
css	CSS	{}	Pass on additional styling utilizing Stitches' tokens

Text

Name	Type	Default value	Description
css	CSS	{}	Pass on additional styling utilizing Stitches' tokens

Theming

You can change the locally scoped tokens of the Root component to customize the style of the loader. Exposed tokens are:

Name	Type	Default value	Description
$$fill	Color	$colors$uiPrimaryMain	The color used for the circle used to represent the current value
$$background	Color	transparent	The color used for the background circle.

Example

import { CircularProgress, styled } from '@streamelements/frontend-ui';

const CustomProgress = styled(CircularProgress.Root, {
  $$fill: '$colors$uiErrorMain',
  $$background: '$colors$uiError16'
});