Progress Line

A cross-platform React linear progress bar component for displaying completion status horizontally.

Installation

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

Demo

Basic Progress Line

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

export default function BasicProgressLine() {
  return <ProgressLine value={75} />;
}

Progress Line Sizes

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

export default function ProgressLineSizes() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <ProgressLine value={60} size="sm" />
      <ProgressLine value={60} size="md" />
      <ProgressLine value={60} size="lg" />
    </div>
  );
}

With Label

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

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

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
        <span>Uploading...</span>
        <span>{progress}%</span>
      </div>
      <ProgressLine value={progress} />
    </div>
  );
}

API Reference

ProgressLine

ProgressLine Props:

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

Theming

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