Plus UI ↗️ Be Our Sponsor ↗️

Progress

Unleash Momentum: Introducing Our Dynamic Progress Component

Elevate user engagement and track progress seamlessly with our Dynamic Progress Component. Whether it's loading times, form submissions, or task completion, this feature-rich element transforms the user experience by providing real-time visual feedback on every step of the journey. Keep users informed and captivated as they interact with your application.

Anatomy

The Progress Component comprises a visually dynamic indicator that communicates the status of ongoing processes. From loading bars to completion circles, its adaptable design ensures a clear representation of progress without sacrificing aesthetic appeal.

Properties

Customize the Progress Component to align with your brand and user interface. Tailor properties such as color, size, and animation speed to create a cohesive and engaging visual language. With adjustable parameters, you have the flexibility to integrate the progress indicator seamlessly into your application's design.

StatusStatesSize

Default

Default

Small

Primary

Disabled

Medium

Information

Indeterminate

Large

Warning

Error

Status

  • Default progress status represents the typical progression of a task or process. It visually illustrates the advancement towards completion and often includes a percentage or visual indicator showcasing the progress made.

  • Primary progress status can be used to emphasize a critical or primary task within a set of progress components. This status indicates the primary focus of the progress, ensuring that users can quickly identify and prioritize key processes.

  • Information progress status might be employed to convey additional details about a process. It provides a visual cue that goes beyond the standard progress, offering users informative feedback about the ongoing task.

  • Warning progress status signals that there may be potential issues or caution associated with the ongoing process. This status helps users identify tasks that require attention or may have associated warnings.

  • Error progress status indicates that an issue or error has occurred during the process. Visually distinct, this status employs different colors, icons, or cues to communicate that the user's attention is needed to address the error or resolve the issue.

import React from 'react';
import { PlusProgress } from '@plusui/react';

// Default Status
const ProgressDefault = () => (
  <PlusProgress value="50" label="File Upload" caption="Uploading..." />  {/* File upload progress */}
);

// Success Status
const ProgressSuccess = () => (
  <PlusProgress value="100" label="File Upload Complete" caption="Your file has been successfully uploaded." status="success" />  {/* Successful upload */}
);

// Info Status
const ProgressInfo = () => (
  <PlusProgress value="50" label="Processing Data" caption="Data is being processed..." status="info" />  {/* Data processing */}
);

// Warning Status
const ProgressWarning = () => (
  <PlusProgress value="75" label="Disk Space" caption="Disk space running low..." status="warning" />  {/* Low disk space warning */}
);

// Error Status
const ProgressError = () => (
  <PlusProgress value="10" label="Server Error" caption="An error occurred while processing the request." status="error" />  {/* Server error */}
);

export default {
  ProgressDefault,
  ProgressSuccess,
  ProgressInfo,
  ProgressWarning,
  ProgressError,
};

Size

Our progress component supports different sizes such as small, medium, large to fit various design requirements.

import React from 'react';
import { PlusProgress } from '@plusui/react';

const ProgressWithSizes = () => (
  <>
    <PlusProgress size="sm" label="Small Progress" caption="Loading..." value="50" />  {/* Small size */}

    <PlusProgress size="md" label="Medium Progress" caption="Processing..." value="50" />  {/* Medium size */}

    <PlusProgress size="lg" label="Large Progress" caption="Working..." value="50" />  {/* Large size */}
  </>
);

export default ProgressWithSizes;

States

  • Default progress component state represents the typical progression of a task or process. It visually illustrates the advancement towards completion and is often accompanied by a percentage or visual indicator showcasing the progress made.

  • Disabled progress component state indicates that the progress tracking is temporarily inactive or not applicable. In this state, the progress bar may be visually subdued or appear differently to signify that it cannot be interacted with or does not currently represent any ongoing process.

  • Indeterminate progress component state is employed when the exact progress of a task is unknown or when the progress is not linear. Instead of displaying a specific percentage, the progress component animates or moves continuously, providing a visual cue that work is in progress without specifying the completion status.

import React from 'react';
import { PlusProgress } from '@plusui/react';

const ProgressWithStates = () => (
  <>
    <PlusProgress value={20} label="Basic Progress" caption="Uploading files..." />  {/* Basic state */}

    <PlusProgress value={20} label="Disabled Progress" caption="Uploading disabled" disabled />  {/* Disabled state */}

    <PlusProgress label="Indeterminate Progress" caption="Loading data..." indeterminate />  {/* Indeterminate state */}
  </>
);

export default ProgressWithStates;

Layout & Spacing

Achieve pixel-perfect precision with our Progress Component's flexible layout and spacing options. Whether you need a compact loading bar or a more spacious circular indicator, you can control the placement and spacing for optimal integration into your application's layout.

Light & Dark Mode

Adapt to diverse user preferences seamlessly with our Progress Component's built-in support for both light and dark modes. Enhance visibility and aesthetics by effortlessly transitioning between these modes, ensuring a consistent and visually pleasing experience in any environment.

Accessibility

Champion inclusivity with our Progress Component's commitment to accessibility. Designed with industry-leading standards in mind, it ensures a smooth experience for all users, including those with disabilities. Compatibility with screen readers, keyboard navigation, and high contrast options makes our Progress Component accessible to everyone.

CriteriaDescriptionStatus

ID Attribute

Ensures every id attribute value is unique

Passed

Inline Text Spacing

Ensure that text spacing set through style attributes can be adjusted with custom stylesheets

Passed

Interactive Control

Ensures interactive controls are not nested as they are not always announced by screen readers
or can cause focus problems for assistive technologies

Passed

Color Contrast

Ensures the contrast between foreground and background colors meets WCAG 2 AA 
contrast ratio thresholds.

AA ~ AAA

Design System

API

PropertyDescriptionTypeAccepted ValuesDefault

size

Determines the size of the progress bar

String

sm, md, lg

md

valueFormat

Format of the progress value

String

percent, step

percent

label

Text label displayed with the progress bar

String

Any valid string

null

caption

Additional text displayed below the label

String

Any valid string

null

error

Indicates an error state for the progress bar

Boolean

true, false

false

status

Sets the status of the progress bar

String

success, warning, error, info, default

default

statusIcon

If true, shows a status icon

Boolean

true, false

false

maxValue

The maximum value for the progress bar

Number

Any positive number

100

indeterminate

If true, indicates an indeterminate progress

Boolean

true, false

false

value

Current value of the progress bar

Number

0 to maxValue

0

disabled

If true, disables the progress bar

Boolean

true, false

false

PreviousPopoverNextRadio

Last updated