Progress Bar

A cross-platform React circular progress bar component for displaying completion status. Useful for showing task progress or loading states with percentage.

Installation

npm install @xsolla/xui-progress-bar
# or
yarn add @xsolla/xui-progress-bar

Demo

Basic Progress Bar

import * as React from 'react';
import { ProgressBar } from '@xsolla/xui-progress-bar';

export default function BasicProgressBar() {
  return <ProgressBar value={75} />;
}

Progress Bar Sizes

import * as React from 'react';
import { ProgressBar } from '@xsolla/xui-progress-bar';

export default function ProgressBarSizes() {
  return (
    <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
      <ProgressBar value={60} size="sm" />
      <ProgressBar value={60} size="md" />
      <ProgressBar value={60} size="lg" />
    </div>
  );
}

Animated Progress

import * as React from 'react';
import { ProgressBar } from '@xsolla/xui-progress-bar';

export default function AnimatedProgress() {
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prev) => (prev >= 100 ? 0 : prev + 10));
    }, 500);
    return () => clearInterval(timer);
  }, []);

  return <ProgressBar value={progress} />;
}

API Reference

ProgressBar

ProgressBar Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | value | number | 0 | Progress value (0-100). | | size | "sm" \| "md" \| "lg" | "md" | Size of the progress bar. |

Theming

theme.colors.background.brand.primary  // Progress fill color
theme.colors.border.secondary          // Track color