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.

anatomy of progress component

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.

Status	States	Size
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.

React

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,
};

Angular

<!-- Default Status -->
<plus-progress value="50" label="File Upload" caption="Uploading..."></plus-progress>  <!-- File upload progress -->

<!-- Success Status -->
<plus-progress value="100" label="File Upload Complete" caption="Your file has been successfully uploaded." status="success"></plus-progress>  <!-- Successful upload -->

<!-- Info Status -->
<plus-progress value="50" label="Processing Data" caption="Data is being processed..." status="info"></plus-progress>  <!-- Data processing -->

<!-- Warning Status -->
<plus-progress value="75" label="Disk Space" caption="Disk space running low..." status="warning"></plus-progress>  <!-- Low disk space warning -->

<!-- Error Status -->
<plus-progress value="10" label="Server Error" caption="An error occurred while processing the request." status="error"></plus-progress>  <!-- Server error -->

Vue

<template>
  <!-- Default Status -->
  <plus-progress value="50" label="File Upload" caption="Uploading..."></plus-progress>  <!-- File upload progress -->

  <!-- Success Status -->
  <plus-progress value="100" label="File Upload Complete" caption="Your file has been successfully uploaded." status="success"></plus-progress>  <!-- Successful upload -->

  <!-- Info Status -->
  <plus-progress value="50" label="Processing Data" caption="Data is being processed..." status="info"></plus-progress>  <!-- Data processing -->

  <!-- Warning Status -->
  <plus-progress value="75" label="Disk Space" caption="Disk space running low..." status="warning"></plus-progress>  <!-- Low disk space warning -->

  <!-- Error Status -->
  <plus-progress value="10" label="Server Error" caption="An error occurred while processing the request." status="error"></plus-progress>  <!-- Server error -->
</template>

Javascript

<!-- Default Status -->
<plus-progress value="50" label="File Upload" caption="Uploading..."></plus-progress>  <!-- File upload progress -->

<!-- Success Status -->
<plus-progress value="100" label="File Upload Complete" caption="Your file has been successfully uploaded." status="success"></plus-progress>  <!-- Successful upload -->

<!-- Info Status -->
<plus-progress value="50" label="Processing Data" caption="Data is being processed..." status="info"></plus-progress>  <!-- Data processing -->

<!-- Warning Status -->
<plus-progress value="75" label="Disk Space" caption="Disk space running low..." status="warning"></plus-progress>  <!-- Low disk space warning -->

<!-- Error Status -->
<plus-progress value="10" label="Server Error" caption="An error occurred while processing the request." status="error"></plus-progress>  <!-- Server error -->

Size

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

React

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;

Angular

<plus-progress
  size="sm"
  label="Small Progress"
  caption="Loading..."
  value="50"
></plus-progress> <!-- Small size -->

<plus-progress
  size="md"
  label="Medium Progress"
  caption="Processing..."
  value="50"
></plus-progress> <!-- Medium size -->

<plus-progress
  size="lg"
  label="Large Progress"
  caption="Working..."
  value="50"
></plus-progress> <!-- Large size -->

Vue

<template>
  <plus-progress
    size="sm"
    label="Small Progress"
    caption="Loading..."
    value="50"
  ></plus-progress> <!-- Small size -->
  
  <plus-progress
    size="md"
    label="Medium Progress"
    caption="Processing..."
    value="50"
  ></plus-progress> <!-- Medium size -->
  
  <plus-progress
    size="lg"
    label="Large Progress"
    caption="Working..."
    value="50"
  ></plus-progress> <!-- Large size -->
</template>

Javascript

<plus-progress
  size="sm"
  label="Small Progress"
  caption="Loading..."
  value="50"
></plus-progress> <!-- Small size -->

<plus-progress
  size="md"
  label="Medium Progress"
  caption="Processing..."
  value="50"
></plus-progress> <!-- Medium size -->

<plus-progress
  size="lg"
  label="Large Progress"
  caption="Working..."
  value="50"
></plus-progress> <!-- Large size -->

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.

React

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;

Angular

<plus-progress
  value="20"
  label="Basic Progress"
  caption="Uploading files..."
></plus-progress>  <!-- Basic state -->

<plus-progress
  value="20"
  label="Disabled Progress"
  caption="Uploading disabled"
  disabled
></plus-progress>  <!-- Disabled state -->

<plus-progress
  label="Indeterminate Progress"
  caption="Loading data..."
  indeterminate
></plus-progress>  <!-- Indeterminate state -->

Vue

<template>
  <plus-progress
    value="20"
    label="Basic Progress"
    caption="Uploading files..."
  ></plus-progress>  <!-- Basic state -->

  <plus-progress
    value="20"
    label="Disabled Progress"
    caption="Uploading disabled"
    disabled
  ></plus-progress>  <!-- Disabled state -->

  <plus-progress
    label="Indeterminate Progress"
    caption="Loading data..."
    indeterminate
  ></plus-progress>  <!-- Indeterminate state -->
</template>

Javascript

<plus-progress
  value="20"
  label="Basic Progress"
  caption="Uploading files..."
></plus-progress>  <!-- Basic state -->

<plus-progress
  value="20"
  label="Disabled Progress"
  caption="Uploading disabled"
  disabled
></plus-progress>  <!-- Disabled state -->

<plus-progress
  label="Indeterminate Progress"
  caption="Loading data..."
  indeterminate
></plus-progress>  <!-- Indeterminate state -->

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.

layout and spacing of progress component

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.

light and dark mode of progress component

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.

Criteria	Description	Status
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

Plus UI Design System | Figma CommunityFigma

Plus UI Design System on Figma

API

Property	Description	Type	Accepted Values	Default
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